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

HTML テキスト入力で数値入力のみを許可する

概要

HTML テキスト入力でユーザーはテキストを入力することはできますが、入力を数値のみに制限したい場合はどうすればよいでしょうか?これは、アカウント番号や PIN などのデータを収集するのに役立ちます。

JavaScript ソリューション

これを実現する 1 つの方法は、JavaScript を使用することです。数値以外の文字をフィルタリングして除外する JavaScript 関数を次に示します。

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 に渡すことができます。入力が数値かどうかを確認します:

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

これにより、 numericInput テキスト入力フィールドは、数字 (および小数点) のみを受け入れます。

注

次の場合は、入力エラー CSS クラスを適用して入力フィールドをスタイル設定することを忘れないでください。無効な値が入力されました。

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