JavaScript を使用して HTML テキスト入力を数値のみを受け入れるように制限するにはどうすればよいですか?

HTML テキスト入力を数値入力のみを許可するように制限する方法

HTML テキスト入力フィールドに数値のみの入力を実装するには、次のようにします。 JavaScript の setInputFilter 関数を利用できます。この関数は、以下をサポートすることにより、入力値を包括的にフィルタリングします。

• コピー アンド ペースト操作
• ドラッグ アンド ドロップ操作
• キーボード ショートカット
• コンテキスト メニュー アクション
• 入力不可キー
• キャレット位置
• さまざまなキーボード レイアウト
• 有効性エラー メッセージ
• IE 9 までのすべてのブラウザとの互換性

JavaScriptコード:

// Restricts input for the given textbox to the given inputFilter function.
function setInputFilter(textbox, inputFilter, errMsg) {
  ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop", "focusout"].forEach(function(event) {
    textbox.addEventListener(event, function(e) {
      if (inputFilter(this.value)) {
        // Accepted value.
        if (["keydown", "mousedown", "focusout"].indexOf(e.type) >= 0) {
          this.classList.remove("input-error");
          this.setCustomValidity("");
        }
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        // Rejected value: restore the previous one.
        this.classList.add("input-error");
        this.setCustomValidity(errMsg);
        this.reportValidity();
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        // Rejected value: nothing to restore.
        this.value = "";
      }
    });
  });
}

関数の使用:

setInputFilter(document.getElementById("myTextBox"), function(value) {
  return /^\d*\.?\d*$/.test(value); // Allow digits and '.' only, using a RegExp.
}, "Only digits and '.' are allowed");

この例では、setInputFilter 関数を「myTextBox」要素で使用して、数値のみ。 inputFilter 関数は正規表現を使用して、入力が数字または小数点のみで構成されていることを確認します。

重要な注意事項:

• サーバー-サイド検証: クライアント側の検証だけでは十分ではないことに注意してください。安全な入力処理のためにサーバー側の検証も実行する必要があります。
• Undo Stack: このソリューションでは、値を直接設定することで、Undo 機能を無効にします。したがって、Ctrl Z は無効な入力には機能しません。
• スタイルのカスタマイズ: 必要に応じて、「input-error」クラスにスタイルを適用できます。

以上がJavaScript を使用して HTML テキスト入力を数値のみを受け入れるように制限するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。