jqueryで数値入力制限してくれるプラグインです。今回紹介する「jquery.numeric.js」は正／負、整数／小数点チェック、更に全角チェックまでしてくれるので使い勝手の良いプラグインかと思われます。
ダウンロード先（GitHub）
使用方法
HTML
|
1 2 3 4 5 |
<script type="text/javascript" charset="utf-8" src="./js/jquery.numeric.js"></script> 数値入力 ：<input class="numeric antirc" type="text" name="num1" /> 整数入力 ：<input class="integer antirc" type="text" name="num2" /> 正の数値入力：<input class="positive antirc" type="text" name="num3" /> 正の整数入力：<input class="positive-integer antirc" type="text" name="num4" /> |
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
jQuery(function($) { // 数字入力対応（入力可能文字：0～9 , 0.1 , -1など） jQuery(".numeric").numeric(); // 整数入力対応（入力可能文字：0～9 , -1など） jQuery(".integer").numeric({ decimal: false }); // 正の数値（入力可能文字：0～9 , 0.1など） jQuery(".positive").numeric({ negative: false }); // 正の整数（入力可能文字：0～9のみ） jQuery(".positive-integer").numeric({ decimal: false, negative: false }); // 全角文字入力対応 jQuery(".antirc").change(function() { jQuery(this).keyup(); }); }); |
サンプル
数値入力 ：
整数入力 ：
正の数値入力：
正の整数入力：
既知のバグ
- FireFoxの場合、「positive」を指定するとDeleteキーが効かなくなる
対処方法
「jquery.numeric.js」の129目へ下記ソースコードの10-11行目を追加してDELキーを有効にします。
12345678910111213if(decimal && key == decimal.charCodeAt(0)){if(this.value.indexOf(decimal) == -1){allow = true;}else{allow = false;// FireFoxでDELキーを有効if(key == 46) allow = true;}}
左（37）右（38）のキーも効いたような良いかもしれませんね。と思ったのですが、
if(key == 46) allow = true;
if(key == 37) allow = true;
if(key == 39) allow = true;
としても左（37）だけ効きませんでした。なんででしょうね。