【HTML】enterkeyhint 属性の使い方｜スマホのソフトキーボードのEnterキー表示を変える方法

スマホで検索フォームを開いたとき、ソフトキーボードのEnterキーに「検索」と表示されていると、次に何をすればよいかが一目で伝わります。この「Enterキーに表示するラベルのヒント」を指定するのが enterkeyhint 属性です。この記事では、enterkeyhint がどんな属性なのか、指定できる値の意味、基本的な書き方、よく混同される inputmode 属性との違い、そして「値を変えても実際の動作が変わらない」といったつまずきやすいポイントまでを順に解説します。

enterkeyhint 属性とは

enterkeyhint は、スマホやタブレットなどのソフトキーボード（仮想キーボード）に表示される「Enter（確定）キー」に、どんなアクションを想定しているかのヒントを与えるグローバル属性です。入力欄である <input> や <textarea>、あるいは contenteditable を指定した編集可能な要素に付けて使います。

たとえば検索ボックスなら、Enterキーに「検索」と出ていたほうが親切です。複数の入力項目が続くフォームなら「次へ」、最後の送信ボタンにあたる欄なら「送信」と表示されていると、ユーザーは迷わず操作を進められます。enterkeyhint はこうした文脈に合わせてキーの見た目を切り替え、モバイルでの入力体験（UX）を高めるための属性です。

基本の書き方

使い方はとてもシンプルで、入力欄に enterkeyhint 属性を追加し、表示したいアクションを表す値を指定するだけです。次は検索ボックスに「検索」を意味する search を指定した例です。

<!-- 検索ボックス。Enterキーに「検索」のヒントを出す -->
<form action="/search">
  <input
    type="search"
    name="q"
    enterkeyhint="search"
    placeholder="キーワードを入力"
  >
</form>

この入力欄をスマホでフォーカスすると、ソフトキーボードのEnterにあたるキーが「検索」を表すアイコンやラベルに変わります。属性を付けるだけで、JavaScript を書かずにキーの見た目を切り替えられるのが特徴です。

指定できる値と意味

enterkeyhint に指定できる値は、次の7つが定義されています。それぞれ「どんなアクションを想定したキーにするか」を表します。

どの値を選ぶかは、その入力欄でEnterを押したときにユーザーが何をしようとしているかで決めます。次の項目に進むフォームなら next、送信ボタン代わりの欄なら send といった具合に、文脈に合った値を選びます。

inputmode 属性との違いと併用

enterkeyhint とよく一緒に語られるのが inputmode 属性です。名前が似ていて混同しやすいのですが、役割ははっきり分かれています。inputmode は「表示するキーボードの種類」を変える属性で、numeric なら数字用、email ならメールアドレス入力に適したキー配列、というようにキーボード全体の見た目を切り替えます。一方 enterkeyhint は、そのキーボードにある「Enterキー1つの見た目」だけを変える属性です。

役割が別なので、2つは同時に指定できます。たとえば数字を入力させたい検索欄なら、数字キーボードを出す inputmode="numeric" と、Enterに「検索」を出す enterkeyhint="search" を併用します。

<!-- 数字キーボードを出しつつ、Enterは「検索」にする -->
<input
  type="text"
  name="code"
  inputmode="numeric"
  enterkeyhint="search"
  placeholder="番号で検索"
>

このように inputmode でキーボードの種類を、enterkeyhint でEnterキーのラベルを、それぞれ独立して指定できます。両方を組み合わせることで、入力欄の目的に合ったキーボードを細かく整えられます。

あくまで「ヒント」である点に注意する

enterkeyhint を使ううえでいちばん誤解しやすいのが、この属性の効果はあくまで「ヒント」にとどまる、という点です。名前のとおり、キーの表示や挙動を最終的にどうするかを決めるのはブラウザ・OS・IME（日本語入力システム）の側です。指定した値が必ずしもそのまま反映されるとは限らず、環境によってラベルの文言やアイコンが違ったり、区別が付きにくかったりすることもあります。

また、この属性が変えるのは基本的に「キーの見た目（ラベル）」だけです。enterkeyhint="send" と書いても、Enterを押した瞬間にフォームが自動で送信されるわけではありません。next にしても、勝手に次の入力欄へフォーカスが移るわけではありません。実際の送信やフォーカス移動といった動作は、これまでどおり自分で JavaScript などを書いて実装する必要があります。enterkeyhint は「これから起きる操作を予告するラベル」を出すだけ、と理解しておくとよいでしょう。

加えて、この属性が意味を持つのはソフトキーボードが表示される環境が中心です。パソコンの物理キーボードには「見た目を変えられるEnterキー」が存在しないため、デスクトップでは通常、指定しても表示上の変化は現れません。効果を確認したいときは、スマホやタブレットの実機で試してください。

next にしても次の欄に移動しないとき

enterkeyhint="next" を指定したのに、Enterを押しても次の入力欄に移動しない、という相談はよくあります。これは不具合ではなく、前の項目で触れたとおり enterkeyhint がラベルを変えるだけの属性だからです。「次へ」というヒントは表示されても、実際にフォーカスを移す処理までは肩代わりしてくれません。

次の欄へ移動させたいなら、その動作は自分で用意します。たとえばキーが押されたことを検知して、次の入力欄に focus() するコードを書きます。

const first = document.querySelector('#first');
const second = document.querySelector('#second');

// Enterで次の入力欄へフォーカスを移す処理は自分で書く
first.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    e.preventDefault();  // 送信などの既定動作を止める
    second.focus();      // 次の欄へ移動
  }
});

このように、enterkeyhint でユーザーに「次へ」と伝えつつ、その予告どおりの動作を JavaScript 側で実装することで、見た目と実際の挙動が一致します。ヒントと動作はセットで用意する、と覚えておくと迷いません。

対応状況

enterkeyhint は主要なモバイルブラウザで広く対応しており、iOS の Safari や Android の Chrome など、実際にソフトキーボードを使う環境で利用できます。仮に未対応の環境で指定しても、ブラウザは知らない属性を無視するだけなので、通常のEnterキーが表示されて特に不具合は起きません。つまり、対応環境では体験が向上し、非対応環境でも害はない、という気軽に使える属性です。

まとめ

enterkeyhint は、スマホのソフトキーボードのEnterキーに「検索」「次へ」「送信」などのヒントを表示させるグローバル属性です。<input> や <textarea> に付け、enter・done・go・next・previous・search・send の7つの値から、その欄の目的に合ったものを指定します。キーボードの種類を変える inputmode とは役割が別なので併用でき、組み合わせれば入力欄をより使いやすく整えられます。ただし、これはあくまでキーのラベルを変える「ヒント」であり、実際の送信やフォーカス移動は自分で JavaScript を書く必要があること、そしてデスクトップの物理キーボードでは見た目が変わらないことを押さえておきましょう。

参考ページ

• enterkeyhint – HTML: ハイパーテキストマークアップ言語 | MDN
• グローバル属性 – HTML: ハイパーテキストマークアップ言語 | MDN
• inputmode – HTML: ハイパーテキストマークアップ言語 | MDN