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アニメーションを使用した簡単な指クリックアニメーションの実装例

推薦する

Linux で実行可能ファイルを実行するときに「そのようなファイルまたはディレクトリはありません」というプロンプトが表示される場合の解決策

最近、Linux オペレーティング システムを使用して実行可能ファイルを実行していたところ、「そのよ...

JavaScriptはイベントリスナーをイベント委任にバッチで追加します。詳細なプロセス

1. イベント委任とは何ですか?イベント委譲: イベントバブリングの特性を利用して、子要素に登録すべ...

まだ*を選択しますか?

アプリケーションが牛のように遅い理由は数多くあります。ネットワーク、システム アーキテクチャ、または...

HTML 描画ユーザー登録ページ

この記事では、HTML描画ユーザー登録ページの具体的な実装コードを参考までに共有します。具体的な内容...

この記事ではCSSの組み合わせセレクターの使い方を説明します

CSS 組み合わせセレクターには、単純なセレクターのさまざまな組み合わせが含まれます。 CSS3 に...

MySQLデータベースに他のIPアドレスからアクセスできない問題の解決策

序文先ほどのプロジェクトを参考にすると、環境は整いました。プロジェクトの準備と検証の段階で、問題が発...

Axios はリクエストをキャンセルし、重複リクエストを回避します

目次起源現状リクエストをキャンセル cancelTokenリクエスト方法の変更重複したリクエストを避...

MySQL データベース面接に必須の 3 つのログの紹介

目次1. redo ログ (MySQL ストレージ エンジン InnoDB のトランザクション ログ...

Tomcat+Mysql の高同時実行構成の最適化の説明

1.Tomcatの最適化構成(1)Tomcatのcatalina.batを変更するJavaをサーバー...

MySQL インデックスに関するヒントのまとめ

目次1. インデックスの基礎知識1.1 インデックスの利点1.2 インデックスの有用性1.3 インデ...

div+css3 を使用して背景グラデーション ボタンを実装するためのサンプル コード

フロントエンド ページの需要が増加し続けるにつれて、一部のシーンではグラデーションの背景要素が必要に...

CentOS8でのnmcliの使い方の詳しい説明

RHEL8/CentOS8 に基づく一般的な nmcli コマンド # IP を表示する (ifco...

MySQL 8.0の落とし穴の詳細な説明

本日、MySQL 8.0 をアップデートしました。最初の問題: Navicatがデータベースに接続で...

MySQL でデータの重複挿入を回避する 4 つの方法

最も一般的な方法は、フィールドに主キーまたは一意のインデックスを設定することです。重複データを挿入す...

Vueデータ割り当て問題の解決

私が長い間遭遇してきた問題を要約してみましょう。プロジェクトでは、フロントエンドをレンダリングするた...