ブラウザや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 - .」以外が入力されるとフォーカスがはずれたときに枠が赤くなる。
使用可能な属性が異なる
使用可能な属性がinput type="text"とは異なる。たとえばmax-length="8"を指定しても文字数を8桁に制限することはできない。
スマートフォンだと数字キーボードになる
スマートフォンやタブレットだと数字キーボードに切り替わるため入力がしやすくなる。
数字のみの入力箇所は必ずtype="number"（or tel）を付けておいたほうが良い。
