jQuery を使用して HTML 入力ボックスで数字 (0-9) のみを許可するにはどうすればよいでしょうか? 質問する

jQuery を使用して HTML 入力ボックスで数字 (0-9) のみを許可するにはどうすればよいでしょうか? 質問する

私は、(0,1,2,3,4,5...9) 0-9 のような数字のみを入力できる入力テキスト フィールドがある Web ページを作成しています。

jQuery を使用してこれを実行するにはどうすればよいですか?

ベストアンサー1

注:これは更新された回答です。以下のコメントは、キーコードをいじった古いバージョンに関するものです。

jQuery

自分で試してみましょうJSFiddle で

これにはネイティブのjQuery実装はありませんが、<input>次のinputFilterプラグインを使用してテキストの入力値をフィルタリングできます(コピー+貼り付け、ドラッグ+ドロップ、キーボードショートカット、コンテキストメニュー操作、入力できないキー、キャレットの位置、さまざまなキーボードレイアウト、妥当性エラーメッセージなどをサポート)。IE 9以降のすべてのブラウザ):

// Restricts input for the set of matched elements to the given inputFilter function.
(function($) {
  $.fn.inputFilter = function(callback, errMsg) {
    return this.on("input keydown keyup mousedown mouseup select contextmenu drop focusout", function(e) {
      if (callback(this.value)) {
        // Accepted value
        if (["keydown","mousedown","focusout"].indexOf(e.type) >= 0){
          $(this).removeClass("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).addClass("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 = "";
      }
    });
  };
}(jQuery));

inputFilterプラグインを使用して入力フィルターをインストールできるようになりました。

$(document).ready(function() {
  $("#myTextBox").inputFilter(function(value) {
    return /^\d*$/.test(value);    // Allow digits only, using a RegExp
  },"Only digits allowed");
});

好みのスタイルを input-error クラスに適用します。提案は次のとおりです。

.input-error{
  outline: 1px solid red;
}

を参照してくださいJSFiddle デモ入力フィルターの例をさらに参照してください。また、サーバー側での検証も行う必要があることに注意してください。

純粋な JavaScript (jQuery なし)

実際にはjQueryは必要ありません。純粋なJavaScriptでも同じことができます。この答え

HTML5 について

HTML 5にはネイティブソリューションがあります<input type="number">仕様) ですが、ブラウザのサポートは異なることに注意してください。

  • ほとんどのブラウザは、入力時には検証せず、フォームの送信時にのみ入力内容を検証します。
  • ほとんどのモバイルブラウザstep、、属性minはサポートされていませんmax
  • Chrome(バージョン71.0.3578.98)では、ユーザーは引き続きフィールドに文字を入力できますeEこの質問
  • Firefox (バージョン 64.0) および Edge (EdgeHTML バージョン 17.17134) では、ユーザーは引き続きフィールドに任意のテキストを入力できます。

自分で試してみましょうw3schools.comで

おすすめ記事