jQuery Validation Pluginで数値のみ入力可テキストボックスを作成する方法

2024-06-12

jQuery でテキストボックスの入力を「数値のみ」に制限する方法（小数点を含む）

このチュートリアルでは、jQueryを使用して、テキストボックスの入力を数値（小数点を含む）のみに制限する方法を説明します。2つの主要な方法を紹介します。

HTML5の input type="number" 属性を使用する
jQueryの keypress イベントを使用して入力を検証する

HTML5には、input type="number" 属性が導入されました。これは、数値入力専用のテキストボックスを作成するために使用できます。この属性を使用すると、ブラウザは自動的に以下の機能を提供します。

↑↓キーによる値の増減
スピンボタン（一部のブラウザ）
有効な数値のみの入力制限（一部のブラウザ）

この方法は、シンプルで使いやすいという利点があります。しかし、すべてのブラウザがこの属性を完全にサポートしているわけではないことに注意する必要があります。

<input type="number" step="0.1">

上記の例では、step="0.1" 属性を使用して、0.1刻みの小数点入力を受け付けます。

input type="number" 属性が十分でない場合、または古いブラウザをサポートする必要がある場合は、jQueryを使用して keypress イベントを処理し、入力を検証することができます。

<input type="text" id="myInput">

$(document).ready(function(){
  $("#myInput").keypress(function(event){
    var key = event.which;
    if (key != 8 && key != 0 && (key < 48 || key > 57) && (key < 192 || key > 219) && key != 46) {
      event.preventDefault();
    }
  });
});

このコードは、以下のキーのみが入力できるように制限します。

数字 (0-9)
小数点 (.)
バックスペース (8)
Delete (0)

その他の考慮事項

ユーザーがマイナス記号 (-) を入力できるようにするには、上記のコードを修正する必要があります。
入力値の長さを制限するには、maxlength 属性を使用できます。
特定の文字範囲のみを許可するには、正規表現を使用できます。

上記の方法のいずれかを使用して、jQueryでテキストボックスの入力を数値（小数点を含む）のみに制限することができます。最適な方法は、要件と使用するブラウザに応じて異なります。

サンプルコード：jQuery でテキストボックスの入力を「数値のみ」に制限する方法（小数点を含む）

<!DOCTYPE html>
<html>
<head>
<title>数値のみ入力可テキストボックス</title>
</head>
<body>
<input type="number" step="0.1" id="numberInput">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  // 入力値が変更されたら処理を実行
  $("#numberInput").change(function(){
    // 入力値を数値に変換
    var value = parseFloat($(this).val());
    
    // 数値でない場合はエラーメッセージを表示
    if (isNaN(value)) {
      alert("数値のみ入力してください。");
      // エラーメッセージを表示したら元に戻す
      $(this).val("");
      return false;
    }
  });
});
</script>
</body>
</html>

このコードは、以下の動作を行います。

input type="number" 属性を使用して、数値入力専用のテキストボックスを作成します。
jQueryを使用して change イベントを処理し、入力値が変更されたら以下の処理を実行します。
- 入力値を parseFloat() 関数を使用して数値に変換します。
- 変換された値が NaN（Not a Number）の場合、エラーメッセージを表示し、入力値を空にします。

<!DOCTYPE html>
<html>
<head>
<title>数値のみ入力可テキストボックス</title>
</head>
<body>
<input type="text" id="textInput">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  // キーが押されたら処理を実行
  $("#textInput").keypress(function(event){
    var key = event.which;
    // 許可するキーのみリスト
    var allowedKeys = [8, 0, 46, 49, 50, 51, 52, 53, 54, 55, 56, 57, 192, 193, 194, 195, 196, 197, 198, 199, 200, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219];
    
    // 押されたキーが許可リストにない場合はデフォルト動作を防止
    if (allowedKeys.indexOf(key) === -1) {
      event.preventDefault();
    }
  });
});
</script>
</body>
</html>

jQueryを使用して keypress イベントを処理し、キーが押されたら以下の処理を実行します。
- 押されたキーのコードを取得します。
- 許可するキーのリストにキーコードが含まれていない場合は、デフォルトの動作を防止します（つまり、キー入力をキャンセルします）。

説明

上記のコードはあくまで一例であり、必要に応じてカスタマイズできます。

jQuery でテキストボックスの入力を「数値のみ」に制限する方法：その他の方法

jQuery Validation Plugin は、フォーム入力の検証を簡単に行うためのライブラリです。このプラグインを使用して、テキストボックスに入力できる文字の種類を制限することができます。

<!DOCTYPE html>
<html>
<head>
<title>数値のみ入力可テキストボックス</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
<script>
$(document).ready(function(){
  $("#myForm").validate({
    rules: {
      numberInput: {
        number: true
      }
    }
  });
});
</script>
</head>
<body>
<form id="myForm">
  <input type="text" name="numberInput" id="numberInput">
  <button type="submit">送信</button>
</form>
</body>
</html>

jQuery Validation Plugin を読み込みます。
#myForm フォームに対して検証ルールを定義します。
numberInput フィールドに対して number ルールを適用します。

このルールは、入力値が数値であることを確認します。

<!DOCTYPE html>
<html>
<head>
<title>数値のみ入力可テキストボックス</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.min.js"></script>
<script>
$(document).ready(function(){
  $("#numberInput").inputmask("99.99");
});
</script>
</head>
<body>
<input type="text" id="numberInput">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
<script>
$(document).ready(function(){
  $("#myForm").validate({
    rules: {
      numberInput: {
        number: true
      }
    }
  });
});
</script>
</body>
</html>

InputMask Plugin を読み込みます。
#numberInput テキストボックスにマスクを適用します。

このマスクは、2桁の整数部と2桁の小数部を持つ数値のみを許可します。

カスタムロジックを使用する

上記の方法で十分でない場合は、カスタムロジックを使用してテキストボックスの入力を検証することができます。

<!DOCTYPE html>
<html>
<head>
<title>数値のみ入力可テキストボックス</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("#numberInput").keypress(function(event){
    var key = event.which;
    var allowedKeys = [8, 0, 46, 49, 50, 51, 52, 53, 54, 55, 56, 57, 192, 193, 194, 195, 196, 197, 198, 199, 200, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 2