【HTML Living Standard】enterkeyhint属性の使い方
enterkeyhint属性の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
enterkeyhintプロパティは、モバイルデバイスなどのソフトウェアキーボードにおいて、Enterキーに表示されるラベルやアイコンの種類を示す値を保持するプロパティです。このプロパティは、HTML Living StandardにおいてすべてのHTML要素に指定できるグローバル属性として定義されています。
このenterkeyhintプロパティを設定することで、ユーザーが入力フィールドでテキストを入力した後、Enterキーを押したときにどのようなアクションが実行されるかをソフトウェアキーボード上に視覚的に示し、ユーザーの操作を直感的にサポートします。例えば、検索フォームであればEnterキーに「検索」と表示させたり、メッセージの送信フォームであれば「送信」と表示させたりすることが可能です。これにより、ユーザーは次に行われる動作を事前に把握でき、入力体験が向上します。
enterkeyhintプロパティに指定できる値には、新しい行を挿入する「enter」、入力が完了したことを示す「done」、指定された宛先に移動する「go」、次の入力フィールドへ移動する「next」、前の入力フィールドへ戻る「previous」、検索を実行する「search」、メッセージを送信する「send」などがあります。これらの値を適切に利用することで、アプリケーションのユーザーインターフェースの使いやすさ（UX）を高めることができます。主にinput要素やtextarea要素といったユーザーからの入力を受け付ける要素に対して利用されます。
構文(syntax)
1<input type="text" enterkeyhint="next">
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML input enterkeyhintでキーボード表示を制御する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>enterkeyhint 属性サンプル</title> 7</head> 8<body> 9 <label for="search_input">検索キーワード:</label> 10 <!-- enterkeyhint="search" は、仮想キーボードのEnterキーを「検索」として表示します。 --> 11 <input type="text" id="search_input" enterkeyhint="search" placeholder="キーワードを入力"> 12 <br><br> 13 14 <label for="send_input">メッセージを送信:</label> 15 <!-- enterkeyhint="send" は、仮想キーボードのEnterキーを「送信」として表示します。 --> 16 <input type="text" id="send_input" enterkeyhint="send" placeholder="メッセージを入力"> 17 <br><br> 18 19 <label for="next_input">次の項目へ:</label> 20 <!-- enterkeyhint="next" は、仮想キーボードのEnterキーを「次へ」として表示します。 --> 21 <input type="text" id="next_input" enterkeyhint="next" placeholder="次の情報を入力"> 22</body> 23</html>
enterkeyhint属性は、HTMLのグローバル属性の一つで、主にモバイル端末などの仮想キーボードにおけるEnterキー（実行キー）の表示内容を、入力欄の用途に合わせて変更するために使用されます。この属性を<input>要素や<textarea>要素などに適用することで、ユーザーがテキスト入力を行った後の次のアクションを、仮想キーボードのEnterキーのラベルとして、視覚的に分かりやすく伝えることができます。
具体的には、"search"（検索）、"send"（送信）、"next"（次へ）といった特定のキーワードを属性値として設定します。例えば、検索フォームの入力欄にenterkeyhint="search"と設定すると、仮想キーボードのEnterキーは「検索」と表示されます。同様に、メッセージ送信欄ではenterkeyhint="send"により「送信」と、複数の入力項目がある場合に次の項目へ進む入力欄ではenterkeyhint="next"により「次へ」と表示されるようになります。
これにより、ユーザーは入力後にどのようなアクションが期待されているかを直感的に理解し、迷うことなくスムーズな操作が可能となり、ユーザー体験の向上が期待できます。この属性自体は、値を受け取る引数や、何らかの結果を返す戻り値といった概念は持っておりません。
enterkeyhint属性は、主にモバイルデバイスの仮想キーボードに表示されるEnterキーのラベル（例：「検索」や「送信」）を変更し、ユーザーに次に期待されるアクションを視覚的に伝えるためのヒントです。
最も重要な注意点として、この属性はあくまで表示のヒントを提供するものであり、実際にフォームを送信したり、特定の処理を実行する機能はありません。 例えばenterkeyhint="search"と指定しても、自動で検索処理が走るわけではないため、別途JavaScriptなどで実際の処理を実装する必要があります。
また、ブラウザ、OS、仮想キーボードの種類によっては、このヒントが完全にサポートされない場合や、異なる表示になる場合があります。全ての環境で意図通りに表示されるとは限らないため、ユーザー体験を向上させるためには、見た目のヒントと実際の動作が乖離しないように、一貫性を保つことが大切です。利用できる値はW3Cの仕様で定義されています。