私は、(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)では、ユーザーは引き続きフィールドに文字を入力できます
e
。E
この質問。 - Firefox (バージョン 64.0) および Edge (EdgeHTML バージョン 17.17134) では、ユーザーは引き続きフィールドに任意のテキストを入力できます。
自分で試してみましょうw3schools.comで。