※本ページはプロモーションを含みます
はじめに
ユーザーに何かを入力してもらいたい画面を作成する場合にinputタグのtypeは何にしていますか？
数字を入力してほしい場合にtype属性の値をnumberにするべきだと安直に考えてはいけません。
input type=numberには落とし穴があります。
input type=numberの落とし穴
Chromeでsizeが効かない
chrome、edgeではsize属性で幅を変更することができません。幅を設定したい場合はcssもしくはstyle属性で調整します。
type属性の値がnumberではなくtextだとsizeで幅調整が可能です。
<!-- これはNG -->
<input type="number" size="10" />
<!-- これはOK -->
<input type="number" style="width:20px;" />スピンボタンが出るタイミングがブラウザによって違う
スピンボタンとは入力欄の横に現れる上下ボタンのことです。
firefoxはtype属性をnumberにした段階でこのスピンボタンが表示されます。
chromeやedgeは最初はスピンボタンが表示されずインプットにフォーカスがあたった段階、もしくはホバーされた段階で表示されます。
firefoxのようにフォーカスがあたっていなくても表示されている方がユーザーには親切だと思うのですが…。
入力時にIMEがかな入力だと数字自体入力できない
IMEなどで日本語入力が「かな」になっている場合、数字を入力すると全角の数字がまず候補にあがります。そこでEnter（もしくはReturn）を押しても半角数字ではないので何も入力されません。
全角数字だと入らないということを気づけないユーザーにしたら「この入力フォーム壊れているよ！」となりかねません。
input type=numberのメリット
input type=numberはデメリットだけではありません。
①キーボードで増減が可能
フォーカスがあたっている時にキーボードの上下ボタンで数値を増減させることができます。数字を直接入力するより正確ですし細かい調整も楽です。
step属性を設定すれば小数点の値や桁の多い増減も可能になります。
②数字入力のバリデーションが効く
半角数字しか入らないので確実に数字が入ることが予測できます。
ブラウザデフォルトのバリデーションも効かせることができます。
③スピンボタンでマウスだけで増減が可能
スピンボタン（上下ボタン）をマウスクリックすることで数値の増減が可能なので入力の煩わしさを軽減させることができます。
使いどころと見た目変更方法
input type=numberはPCよりスマホのようなタッチデバイスと相性がよいです。
端末によって違いはありますがtype=numberを指定しているとフォーカス時にキーボード表示が数値のものに変わります。
わざわざ数字モードに切り替えなくてすみます。
スピンボタンを表示させたくないときのCSS
スピンボタンが邪魔な時がありますが次のようにCSSで指定して非表示にすることもできます。
<input type="number" />/* chrome,edge,safari */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* firefox */
input[type="number"] {
-moz-appearance: textfield;
}最後に
ここまで来たら数値入力する際にはtype=numberで正解かと思えてきますが実務レベルでは使用できません。
input type=numberには全角数字を値として登録できないからです。
全角数字を値をして登録できたらjavascriptを活用して半角数字に変換してあげればよいのですが値としてまったく取得できないのでjavascriptで変換できないのです。
日本語入力が必要ない英語圏ではこの心配はありませんが日本ではそうはいきません。
より良いフォーム機能を作りたければinput type=textを使用して全角数字が入力された段階でjavascriptで半角に変換するなどの処理を付け加えましょう。
