1. ホーム
  2. jquery

[解決済み] HTMLのinputboxでjQueryを使って数字(0-9)だけを許可する方法は?

2022-02-20 17:42:18

質問内容

Webページを作成しているのですが、入力テキストフィールドに(0,1,2,3,4,5...9) 0-9 のような数字のみを許可したいのですが、どうすればよいでしょうか?

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

どのように解決するのですか?

<上 注意 これは更新された回答です。以下のコメントは、キーコードをいじくりまわしていた古いバージョンに言及しています。

jQuery

自分でやってみる on JSFiddle .

これに対するネイティブのjQuery実装はありませんが、テキストの入力値をフィルタリングすることができます。 <input> を以下のように指定します。 inputFilter プラグイン(Copy+Paste、Drag+Drop、キーボードショートカット、コンテキストメニュー操作、入力不可能なキー、キャレット位置、さまざまなキーボードレイアウト、そして IE9以降の全ブラウザ ):

// Restricts input for the set of matched elements to the given inputFilter function.
(function($) {
  $.fn.inputFilter = function(inputFilter) {
    return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        this.value = "";
      }
    });
  };
}(jQuery));

これで inputFilter プラグインを使用して、入力フィルタをインストールします。

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

をご覧ください。 JSFiddleのデモ は、入力フィルタの例です。また、まだ は、サーバーサイドのバリデーションを行う必要があります。

ピュアJavaScript(jQueryなし)

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

HTML 5

HTML5では、ネイティブソリューションとして <input type="number"> (を参照してください)。 仕様 ただし、ブラウザの対応状況はさまざまです。

  • ほとんどのブラウザは、フォームを送信するときにのみ入力の検証を行い、入力中には検証を行いません。
  • ほとんどのモバイルブラウザ をサポートしていません。 step , minmax 属性があります。
  • Chrome (バージョン71.0.3578.98) では、現在でも、文字 eE をフィールドに挿入します。また この質問 .
  • Firefox(バージョン64.0)およびEdge(EdgeHTMLバージョン17.17134)では、現在も、ユーザーが 任意の のテキストをフィールドに入力します。

自分でやってみる w3schools.comで .