フォームで数値のみ入力できるようにしてみたいと思います。
type=numberで対応
inputのtype=numberで対応してみます。
対応ブラウザはIE10からになります。(参考:Can I use…)
HTML
1 2 3 | <input type="number" name="number" /><input type="number" name="number" min="0" max="30" /><input type="number" name="number" step="0.1" /> |
半角の数値と+-.のみ入力できるようです。
type=numberを使ったデモページ
jQueryで対応
対応ブラウザと入力可能内容が問題なければtype=numberでよいのですが、今回はスペースも入力できるようにしたかったので、jQueryでも実装を試してみます。
HTML
1 | <input type="text" name="number" id="number" /> |
JavaScript
1 2 3 4 5 6 7 8 9 | $(function() { $('#number').on('keydown', function(e) { var k = e.keyCode; // 0～9, テンキ―0～9, スペース, backspace, delete, →, ←, 以外は入力キャンセル if(!((k >= 48 && k <= 57) || (k >= 96 && k <= 105) || k == 32 || k == 8 || k == 46 || k == 39 || k == 37)) { return false; } });}); |
他にも入力範囲を増やしたい場合は、if文の中に追加していけば対応できます。
jQueryで対応のデモページ
【参考サイト】
コメントが承認されるまで時間がかかります。