フォームで数字のみ入力できるようにする

フォームで数値のみ入力できるようにしてみたいと思います。

type=numberで対応

inputのtype=numberで対応してみます。
対応ブラウザはIE10からになります。(参考:Can I use…)

HTML

<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

<input type="text" name="number" id="number" />

JavaScript

$(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で対応のデモページ
　

【参考サイト】

• <input type="number">－HTML5タグリファレンス