HTML で入力ボックスに純粋な数字のみを入力するように制限する方法

HTML で入力ボックスに純粋な数字のみを入力するように制限する方法

inputボックスを純粋な数字のみに制限する

1、onkeyup = "value=value.replace(/[^\d]/g,'')"

onkeyupイベントを使用する場合にbugがあります。中国語入力方法では、中国語の文字を入力して Enter キーを押すと、文字が直接入力されます。

2、onchange = "value=value.replace(/[^\d]/g,'')"

onchangeイベントを使用すると、コンテンツを入力した後、 inputフォーカスを失ったときにのみ結果が取得され、入力時には応答しなくなります。

3、oninput = "value=value.replace(/[^\d]/g,'')"

oninputイベントを使用すると、上記 2 つの問題が完全に解決され、これまでのテストでは他の問題は発生していません。

コードサンプル

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8" />
    <title>入力</title>
</head>
<本文>
    純粋な数字のみを入力できる入力ボックス: <input type="text" name="" oninput="value=value.replace(/[^\d]/g,'')">
</本文>
</html>

HTML の入力ボックスを純粋な数字のみの入力に制限する方法についての記事はこれで終わりです。入力を数字のみに制限する方法に関するより関連性の高い HTML コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  overflow:hidden の役割の詳細な説明 (オーバーフローの非表示、フロートのクリア、マージンの崩壊の解決)

>>:  CSS3アニメーションを使用した簡単な指クリックアニメーションの実装例

推薦する

Docker での WSL の構成と変更の問題について

https://docs.microsoft.com/ja-jp/windows/wsl/wsl-...

JavaScript シミュレーション計算機

この記事では、JavaScriptシミュレーション計算機の具体的なコードを参考までに紹介します。具体...

ボリュームを使用してホストと Docker コンテナ間でファイルを転送する方法

以前、Docker コンテナとローカル マシン間のファイル転送に関する記事を書きました。しかし、この...

Vueリクエストインターセプターの設定方法の詳しい説明

以下の手順に従ってください1. request.jsコンテンツ: http リクエスト インターセプ...

Vue echarts は水平棒グラフを実現します

この記事では、水平棒グラフを実現するためのvue echartsの具体的なコードを参考までに共有しま...

Linux 最速のテキスト検索ツール ripgrep (grep の最良の代替)

序文テキスト検索ツールといえば、Linux で最も便利でよく使われるツールの 1 つである grep...

Vuex環境の詳細な説明

目次Vuex環境を構築する要約するVuex環境を構築するsrcディレクトリにフォルダstoreを作成...

CentOS 7.4 に MySQL 5.7 を手動でインストールする方法

MySQL データベースは、特に JAVA プログラマーの間で広く使用されています。クラウド データ...

Vue における v-for のキーの一意性の詳細な説明

目次1. DOM の違い2. 同じレイヤーの同じタイプの要素にキー属性を追加する3. キーはインデッ...

JavaScript ベースのシンプルな計算機の実装

この記事では、参考までに、簡単な計算機を実装するためのJavaScriptの具体的なコードを紹介しま...

HTMLページ間でパラメータを渡すフロントエンド方式の詳細な説明

プロジェクトでよくある状況として、案件リストなどのリストが存在することがあります。リスト内の項目をク...

JavaScript の組み込みオブジェクト 数学と文字列の詳細な説明

目次数学オブジェクト共通プロパティ一般的な方法Math.random()文字列メソッド長さプロパティ...

ReactアプリケーションにおけるDOM DIFFアルゴリズムの詳細な説明

目次序文VirtualDOM とは何ですか? VirtualDOMを使用する理由DOMレンダリングペ...

Linuxにおけるselinuxの基本設定チュートリアルの詳細な説明

selinux ( Security-Enhanced Linux)は、Linux カーネル モジュ...

Windows 7 で Python 3.4 を使って MySQL データベースを使用する

Python 3.4でMySQLデータベースを使用する詳細なプロセスは次のとおりです。 Window...