スマホユーザーのユーザビリティ向上に!
- 電話番号のフォームをタップしたら数字キーボードを表示したい!
- いちいちひらがなから数字キーボードに変更するのがめんどくさい!
こんな要望に応えられる方法です!(一部応えられれないこともあります😢)
ブラウザやバージョンによって見た目が違うようです!
※よって、必ず検証した上で本番適用してください。
以下に、「私が2023年8月頃に、Android + Google日本語入力、iPhoneSE + iOS標準入力ソフトで検証した結果」をご紹介します!
inputmode:指定なし
指定する項目:氏名、フリガナ、会社名、住所、お問い合わせ内容など
Android + Google日本語入力
動作:直前に使用されていた入力モードが表示されました。(数字入力モード、電話番号入力モードは除く)

iPhoneSE + iOS標準入力ソフト
動作:直前に使用されていた入力モードが表示されました。(数字入力モード、電話番号入力モードは除く)

inputmode:numeric
指定する項目:数量など
Android + Google日本語入力
動作:数字入力モードが表示されました。

iPhoneSE + iOS標準入力ソフト
動作:数字入力モードが表示されます。(数字の下にアルファベットが表示されていますが、入力はできないようです)

inputmode:tel
指定する項目:電話番号
Android + Google日本語入力
動作:電話番号入力モード(数字+一部の記号)が表示されます。

iPhoneSE + iOS標準入力ソフト
動作:電話番号入力モード(数字+一部の記号)が表示されます。(数字の下にアルファベットが表示されていますが、入力はできないようです)

inputmode:email
指定する項目:メールアドレス、メールアドレス(確認)
Android + Google日本語入力
動作:英字+記号入力モードが表示されます。

iPhoneSE + iOS標準入力ソフト
動作:直前に使用されていた入力モードが表示されます。 (数字入力モード、電話番号入力モード除く)

まとめ
検証結果は以上です!
上手に使うとユーザビリティを向上させることができるので、積極的に使っていきましょう!