MENU

【HTML】inputタグにinputmodeを設定してみよう!

  • URLをコピーしました!
目次

スマホユーザーのユーザビリティ向上に!

  • 電話番号のフォームをタップしたら数字キーボードを表示したい!
  • いちいちひらがなから数字キーボードに変更するのがめんどくさい!

こんな要望に応えられる方法です!(一部応えられれないこともあります😢)

ブラウザやバージョンによって見た目が違うようです!

※よって、必ず検証した上で本番適用してください。

以下に、「私が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標準入力ソフト

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

まとめ

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

この記事が気に入ったら
いいねしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次