input type=”number”を積極的に使用するための5つのポイント

input type="number"を積極的に使用するための5つのポイント

ブラウザやOSによって挙動が異なる

IEやMicrosoft Edgeはそもそもinput type=”number”に未対応のためinput type=”text”と見た目と挙動に変化がない。

スピンボタンが追加される

FirefoxおよびChromeなどのWebKit系ブラウザはスピンボタンが付いて見た目が変わる。押すと数値の上限が可能。

スピンボタンを押すとデフォルトだと1ずつ増減するがstep属性を追加してstep=”5″のように指定すると5ずつ増減させることができる。

ちなみにWebKit系ブラウザのみ以下のCSSでスピンボタンを非表示にすることが可能。

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

FirefoxとWebKitで入力可能な値が異なる

Firefoxはどのような文字も入力可能だがWebKit系ブラウザは数字と「+ e E – .」のみ入力可能になる。

ちなみにFirefoxは数字と「+ e E – .」以外が入力されるとフォーカスがはずれたときに枠が赤くなる。
Firefoxは数字と「+ e E - .」以外が入力されるとフォーカスがはずれたときに枠が赤くなる。

使用可能な属性が異なる

使用可能な属性がinput type=”text”とは異なる。たとえばmax-length=”8″を指定しても文字数を8桁に制限することはできない。

スマートフォンだと数字キーボードになる

スマートフォンやタブレットだと数字キーボードに切り替わるため入力がしやすくなる。

数字のみの入力箇所は必ずtype=”number”(or tel)を付けておいたほうが良い。

input type=”number” のサンプル