HTML5 の input 要素を number タイプにすると、min、max、step 属性で、spinner を利用できます( Chrome と Firefox。IE11 は内容の検査のみ )

jQuery UI では、spinner と呼ばれるコントロールですが、type 属性に number を指定する事によって同様のコントロールになります(Chrome と Firefox )。min 属性と max 属性をさらに指定すると、最小値(min)と最大値(max)の間を( step を指定しなければ 1 づつ )増やしたり減らしたりするコントロールが、フィールドの右横に実装されます。

増減値は、step 属性で指定できるので、汎用性も高いです。

Google Chrome



フィールド右横のコントロールは、マウスカーソルを近づけるか、フォーカスが入力フィールドにある時( つまりアクティブな時 ) だけ表示されます。

ただ、最大値と最小値の値の都合で、増分 2 にした場合、奇数だけになったり、偶数だけになったりしてちょっと問題はあります。

その際、コントロールで変更しようとすると、奇数か偶数に飛びます。入力した値で送信しようとすると以下のようなエラーになります




Firefox



Google Chrome と同様で、奇数だけになったり、偶数だけになったりした上、奇数とコントロールが決めた時に、偶数値を入力すると、コントロールが動作せずに値が変わらず枠が赤くなってエラー扱いになっています。



IE11

IE11 では、値変更用のコントロールが無い事をのぞいて、属性による検査の仕様は同等です。




▼ 実際の実行

▼ 奇数扱いになっています

<form action="http://winofsql.jp/php_get.php"
	target="my_frame"
	accept-charset="utf-8">
	<input type="number"
		name="userid"
		value=""
		step="2"
		min="-1"
		max="5">
	<input type="submit"
		name="send"
		value="送信">
</form>
<iframe name="my_frame"
	frameborder="1"
	scrolling="yes"
	width="400"
	height="100" >
</iframe>