【徹底解説】jQuery を使って HTML 入力ボックスで数値のみを入力する方法
2024-04-02
jQuery を使用して HTML 入力ボックスで数値のみを許可する方法
前提条件
このチュートリアルを始める前に、以下のものが必要です。
- HTML ファイル
- jQuery ライブラリ
手順
- HTML ファイルに jQuery ライブラリを追加します。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
- 入力ボックスに
keypressイベントを追加します。
<input type="text" id="number-input" />
$("#number-input").on("keypress", function(event) {
// 数字のみ許可する
var charCode = event.which ? event.which : event.keyCode;
if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
event.preventDefault();
}
});
コード解説
keypressイベントは、キーが押されたときに発生します。event.whichまたはevent.keyCodeは、押されたキーのコードを取得します。charCodeが 46 (ピリオド) または 31 (スペース) 以外で、48 (0) より小さく 57 (9) より大きい場合は、キー入力をキャンセルします。
- jQuery Validate プラグイン を使用して、入力ボックスの検証を行うことができます。
- HTML5 の inputmode 属性 を使用して、入力ボックスの入力モードを "numeric" に設定できます。
このチュートリアルでは、jQuery を使用して HTML 入力ボックスで数値のみを入力できるようにする方法を説明しました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数値のみ入力できるテキストボックス</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>数値のみ入力できるテキストボックス</h1>
<input type="text" id="number-input" />
<script>
$("#number-input").on("keypress", function(event) {
// 数字のみ許可する
var charCode = event.which ? event.which : event.keyCode;
if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
event.preventDefault();
}
});
</script>
</body>
</html>
実行例
補足
- 上記のコードは、半角数字のみを入力できるようにしています。全角数字も入力できるようにするには、
charCode > 31をcharCode > 126に変更します。 - 小数点を入力できるようにするには、
charCode != 46を削除します。 - マイナス記号を入力できるようにするには、以下のコードを追加します。
if (charCode == 45) {
// マイナス記号を許可する
} else if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
event.preventDefault();
}
数値のみ入力できるテキストボックスを作成する他の方法
HTML5 の inputmode 属性
<input type="text" inputmode="numeric" />
この方法の利点は、JavaScript を必要としないことです。
<input type="text" id="number-input" />
$("#number-input").validate({
rules: {
number: {
required: true,
number: true
}
}
});
この方法の利点は、エラーメッセージを表示したり、他の検証ルールと組み合わせて使用できることです。
- JavaScript の
oninputイベントを使用して、入力値をリアルタイムでチェックする - JavaScript の
RegExpオブジェクトを使用して、入力値を検証する
これらの方法は、より高度なカスタマイズが可能ですが、JavaScript の知識が必要となります。
数値のみ入力できるテキストボックスを作成するには、いくつかの方法があります。
- HTML5 の
inputmode属性は、最も簡単な方法です。 - jQuery Validate プラグインは、より多くの機能を提供します。
- その他の方法を使用すると、より高度なカスタマイズが可能になります。
jquery html validation
