メールフォームなどテキストボックスへ文字を入力する際に、半角数字のみに制限してくれるjQueryプラグインjQuery Plugin – Numericのご紹介です。
jQuery Plugin – Numeric のダウンロード
以下のページよりjquery.numeric.min.jsのファイルをダウンロードします。jQuery Plugin – Numeric
jQuery Plugin – Numericによる入力値制御
ダウンロードしたjquery.numeric.min.jsをjquery.minファイルと一緒に<head>内に読み込ませます。|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<script type="text/javascript" src="./jquery.min.js"></script> <script type="text/javascript" src="./jquery.numeric.min.js"></script> <script type="text/javascript"> // 数値 $(".numeric").numeric(); // 整数: $(".integer").numeric(false, function() { alert("Integers only"); this.value = ""; this.focus(); }); // 正数 $(".positive").numeric({ negative: false }, function() { alert("No negative values"); this.value = ""; this.focus(); }); // 正の整数 $(".positive-integer").numeric({ decimal: false, negative: false }, function() { alert("Positive integers only"); this.value = ""; this.focus(); }); //小数点以下2桁までの数値 $(".decimal-2-places").numeric({ decimalPlaces: 2 }); //フォームへのペースト禁止 $(".notpast").on('paste','input[type=text]', function(){ return false; }); </script> |
上記のように「数値」「整数」「正数」「正の整数」「小数点以下○桁までの数値」の入力制御が可能になります。
※なお、フォームに値を入力する際に制御は掛かりますが、テキストのペーストが可能なので、今回はペースト禁止の処理も加えています。
HTML
フォーム部分は以下のようにします。|
1 2 3 4 5 6 7 8 9 10 11 |
<form class="notpast"> 数値:<input class="numeric" type="text" /> <br/><br/> 整数:<input class="integer" type="text" /> <br/><br/> 正数:<input class="positive" type="text" /> <br/><br/> 正の整数:<input class="positive-integer" type="text" /> <br/><br/> 小数点以下2桁までの数値:<input class="decimal-2-places" type="text" /> </form> |
inputタグのクラスにnumeric、integerなどを指定します。
以下にjQuery Plugin – Numericによるフォームのデモを用意していますので、挙動を確認していただければと思います。
jQuery – Numeric によるフォームの入力値制御デモ
コメント