HTML5: 各ブラウザでの『input type=number』の対応状況

• 仕様: input type=number – number input control (NEW) - HTML5

環境

• Windows 7
  • IE 11.0
  • Chrome 35.0
  • Firefox 30.0

実験1: 初期状態の表示

<form onsubmit="return false;">
    <input type="number">
</form>

ブラウザ	表示
IE
Chrome
Firefox

IEでは上下の矢印キーで数値を増減させることができません。
単なる文字入力欄となっているようです。

実験2: 数値ではなく文字を入力してsubmitする

ブラウザ	表示
IE
Chrome
Firefox

IEでは警告が表示されません。

実験3: 『required』を設定し、空白のままsubmitする

<form onsubmit="return false;">
    <input type="number" required>
</form>

ブラウザ	表示
IE
Chrome
Firefox

どのブラウザでも正しく機能しています。

実験4: 『required』を設定し、文字を入力してsubmitする

<form onsubmit="return false;">
    <input type="number" required>
</form>

ブラウザ	表示
IE
Chrome
Firefox

実験3との違いは、『文字を入力してsubmitする』ことです。
ここでChromeとFirefoxで違いが出ました。
Firefoxの警告文が正しくありません。

感想

Yahoo!知恵袋での質問を受けて簡単な計算用フォームを作ったことがきっかけでこのような調査を行いました。

• 参照: Runnableで公開している計算用フォーム

挙動や表示に不自然な点はあっても、とりあえずどのブラウザでも『数値以外または空白だったら警告』してくれます。
デザインを気にしなければ、バリデーションの処理をプログラム側で作らずにすむので楽ができますね。