[解決済み] 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
,min
とmax
属性があります。 -
Chrome (バージョン71.0.3578.98) では、現在でも、文字
e
とE
をフィールドに挿入します。また この質問 . - Firefox(バージョン64.0)およびEdge(EdgeHTMLバージョン17.17134)では、現在も、ユーザーが 任意の のテキストをフィールドに入力します。
自分でやってみる w3schools.comで .
関連
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] jQueryでdiv内のspanにテキストを追加する
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] どのラジオボタンが選択されているかをjQueryで知るにはどうしたらよいですか?
-
[解決済み] jQueryで要素にスクロールする
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] リンクのように動作するHTMLボタンを作成する方法
-
[解決済み] セレクタの子を取得する方法は?
-
[解決済み] jQueryを使用しない$(document).ready相当
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】jQueryでクリックされた要素のIDを取得する方法
-
[解決済み] フォーム送信のjQueryが動作しない
-
[解決済み] jQueryの遅延が機能しない
-
[解決済み] How to make the first option of <select> selected with jQuery
-
[解決済み] jQuery slidetoggleが動作しない?[クローズド]
-
[解決済み] jQuery動的セレクタ
-
[解決済み] asp.net mvcのHtml.BeginForm()にIDプロパティを追加する方法は?
-
[解決済み] Uncaught TypeError: 未定義のプロパティ 'ajax' を読み取ることができません。
-
[解決済み] jQuery Mobileのボタンを無効にする
-
[解決済み] jqueryでラジオボタンを検証する?