ちょっと良いUIおれおれAdvent Calendar 2024 – 02日目
よくあるけど配送番号みたいな識別子とか。
デモ：
数値入力は <input type="number">
はい。
数字入力は <input type="text" inputmode="numeric">
でお願いします。
現代のスマホだとバーチャルキーボードが数値入力 (numeric input) に変化します。
似たものに inputmode="decimal" というのがあって、こっちは decimal なので小数値入力 fractional numeric input できるようドット “.” 付きのキーボードになったりするようです。デモで試してみてください。
他の値
inputmode は他にも email とか url とかあって便利そうなんだけど普通に type で指定するのが良いかと思います。入力モードだけ変えたい用途ってあるかな。
電話番号入力は <input type="tel">
というわけで type も諸々あるので使えるときは素直に使いましょう。
type で使える値も昔と比べると色々増えて……と思ったら 2009 年導入のようです。ほげえ。
おしまい
inputmode="decimal" でドットと書いたけど言語によってはカンマ “,” が小数点になるものもあって、そこらへんはよしなにやってくれるらしい。