読者です 読者をやめる 読者になる 読者になる

すたらブログ

文系Webプログラマの備忘録

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

未分類

環境

実験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する』ことです。
ここでChromeFirefoxで違いが出ました。
Firefoxの警告文が正しくありません。

感想

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

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