inputmode・autocomplete・enterkeyhintでスマホの入力を速くする

<input>で入力体験を上げるうえで効果が大きいのは、autocomplete・inputmode・enterkeyhintの3つを正しく書くことです。特にスマートフォンでは、この3つの有無で入力にかかる時間がはっきり変わります。

この記事は、その3つの属性だけに絞って使い方とつまずきやすい点をまとめます。先に補足しておくと、どれも2023年に追加された属性ではありません。以前から仕様にあるもので、2023年前後に「全ブラウザで安心して使える状態になった」というのが正確なところです。typeの選び方や検証まわりは、それぞれ別記事に分けました。

type / inputmode / pattern の役割分担

この3つは似て見えますが、役割がまったく違います。混同すると「数字しか入らないはずの欄に文字が入る」「スマホでキーボードが切り替わらない」といった不具合になります。

いちばん誤解されるのがinputmodeです。これは出るキーボードを変えるだけで、入力値を制限しません。 inputmode="numeric"を書いた欄にも、PCのキーボードからは文字がそのまま入ります。形式を担保したいならpatternとサーバー側の検証が必要です。

inputmode でモバイルキーボードを合わせる

スマホで出るキーボードはinputmodeで決めます。結論は、数字を入れる欄ではtype="number"ではなくtype="text"＋inputmode="numeric"にすることです。

つまずくのは数字を並べるだけの欄、つまり郵便番号やカード番号です。ここにtype="number"を使うと、先頭の0が落ちたりハイフンが入力できなくなったりします（理由の詳細はinput要素のtype一覧と使い分けにまとめました）。

正解はtype="text"＋inputmode="numeric"＋patternの組み合わせです。

<!-- ❌ 郵便番号に type="number" は使わない -->
<input type="number" name="zip">

<!-- ✅ -->
<label for="zip">郵便番号</label>
<input type="text" id="zip" name="zip"
       inputmode="numeric"
       autocomplete="postal-code"
       enterkeyhint="next"
       pattern="\d{3}-?\d{4}"
       title="123-4567 または 1234567 の形式で入力してください"
       maxlength="8">

電話番号はtype="tel"を使えますが、こちらも形式の検証はブラウザ側にありません。国ごとに形式が違うためです。inputmode="tel"でキーパッドを出し、patternで形式を補います。

inputmode に指定できる値

numericとdecimalの取り違えは、金額欄で小数点が打てないという形で表に出ます。迷ったら「小数点が要るか」で決めてください。

autocomplete を正しく書くと入力が一番速くなる

体感で最も効くのがこれです。 ブラウザやパスワードマネージャーが保存済みの住所・氏名・カード情報をワンタップで流し込めるようになります。

注意点は、autocomplete="on" や autocomplete="名前" のような自己流の値では効かないことです。仕様で決められたトークンを使う必要があります。

<input type="text"  name="lname" autocomplete="family-name">
<input type="text"  name="fname" autocomplete="given-name">
<input type="email" name="email" autocomplete="email">
<input type="tel"   name="tel"   autocomplete="tel">
<input type="text"  name="zip"   autocomplete="postal-code">
<input type="text"  name="addr1" autocomplete="address-level1"> <!-- 都道府県 -->
<input type="text"  name="addr2" autocomplete="address-level2"> <!-- 市区町村 -->
<input type="text"  name="addr3" autocomplete="address-line1">  <!-- 番地 -->

生年月日にはautocomplete="bday"が使えます。住所を分割せず1つの欄で受ける場合はstreet-address、氏名を分割しない場合はnameです。

ログインと新規登録で autocomplete の値は違う

ここを間違えると、パスワードマネージャーが誤動作します。ログインと新規登録で値が違うことに注意してください。

<!-- ログイン -->
<input type="text"     name="user" autocomplete="username">
<input type="password" name="pass" autocomplete="current-password">

<!-- 新規登録・パスワード変更 -->
<input type="password" name="new"  autocomplete="new-password">

<!-- SMSで届く認証コード（自動入力される） -->
<input type="text" name="code"
       inputmode="numeric" autocomplete="one-time-code" maxlength="6">

autocomplete="one-time-code"は、iOSやAndroidでSMSの認証コードを自動入力させるためのものです。これを入れるかどうかで、二段階認証の通過率がはっきり変わります。

新規登録の欄にcurrent-passwordを書くと、保存済みのパスワードが入ってしまうことがあります。登録とパスワード変更はnew-password、と覚えてください。

enterkeyhint でキーボードの実行キーを変える

スマートフォンのキーボード右下のキーは、既定では「改行」や「完了」です。enterkeyhintで「検索」「送信」「次へ」に変えられます。

<input type="search" enterkeyhint="search" placeholder="サイト内を検索">

<input type="text"  enterkeyhint="next"   name="lname">
<input type="text"  enterkeyhint="next"   name="fname">
<input type="email" enterkeyhint="send"   name="email">

指定できるのは enter / done / go / next / previous / search / send です。多段のフォームでnextを並べるだけで、指の移動がかなり減ります。

役割を整理すると、inputmodeが出るキーボード、autocompleteが流し込める値、enterkeyhintが実行キーのラベルです。3つは競合しないので、スマホで使われる欄には全部書いて構いません。

まとめ

• inputmodeはキーボードを変えるだけ。入力値は制限しない。形式はpatternとサーバー側で担保する
• 郵便番号・電話番号・カード番号はtype="text"＋inputmode="numeric"＋pattern
• numeric（数字のみ）とdecimal（小数点あり）を取り違えない
• autocompleteは仕様の決まったトークンで書く。onや自己流の値では効かない
• current-passwordとnew-passwordを取り違えない
• SMS認証にはautocomplete="one-time-code"
• enterkeyhintでキーボードの実行キーを「次へ」「検索」に変える

この3つはどれも1行足すだけで、見た目は何も変わりません。それでいてスマホの入力時間には効くので、既存のフォームを見直すときは最初に確認する場所だと思っています。

typeごとの癖（date・number・file・datalistなど）はinput要素のtype一覧と使い分けに、エラー表示と送信（:user-invalid / setCustomValidity() / requestSubmit()）はHTMLフォームのバリデーションと送信にまとめています。確認ダイアログの実装はdialog要素の使い方を参照してください。