定義と使い方
enterkeyhint属性は
仮想キーボードのEnterキーに表示されるテキストやアイコンの見た目などのラベル(action label)を明示的に指定するための属性です。
この属性は、ユーザーがEnterキーを押したときにどのような動作を期待しているのかについて、より有用なヒント(hint)を設定によって提供するものです。
enterkeyhint属性は、仮想キーボードのEnterキーの機能に関するヒント(hint)を最も適切に指定することで、特にモバイル環境のユーザーに対して、より有用なユーザー体験(User Experience, UX)を提供するために使用されます。
補足説明contenteditable属性は、要素のコンテンツを編集できるかどうかを指定します。
この属性をtrueに設定すると要素のコンテンツを編集でき、falseに設定すると編集できません。
基本例
<label for="user-pin">PIN</label>
<input id="user-pin" type="text" enterkeyhint="done">
上記の例コードのようにenterkeyhint属性の値を"done"に設定すると、ブラウザは以下のキャプチャ画面のように、Enterキーのラベルとしてヒントを表示します。
参考にしてください!
仮想キーボードの見た目やユーザーインターフェースは、デバイスやブラウザ、ユーザーの言語設定によって異なる場合があります。
enterkeyhint属性値
enterkeyhint="enter" |
新しい行を挿入する「enter(入力)」操作に関する手がかりを提示する必要があります。 |
|---|---|
enterkeyhint="done" |
「完了」操作に関する手がかりを提示する必要があります。一般的に、これ以上入力する内容がなく、IME(Input Method Editor)が閉じられます。 |
enterkeyhint="go" |
ユーザーが入力したテキストの対象へ移動させることを意味する「移動」操作に関する手がかりを提示する必要があります。 |
enterkeyhint="next" |
「次へ」操作に関する手がかりを提供する必要があり、一般的にユーザーをテキスト入力を受け付ける次のフィールドへ案内します。 |
enterkeyhint="previous" |
「前へ」操作に関する手がかりを提示する必要があり、一般的にユーザーをテキスト入力を受け付ける前のフィールドへ案内します。 |
enterkeyhint="search" |
ユーザーが入力したテキストの検索結果へ案内することを意味する「検索」操作に関する手がかりを提供する必要があります。 |
enterkeyhint="send" |
ユーザーがテキストを送信することを意味する「送信」操作に関するシグナルを提供する必要があります。 |
参考にしてください!enterkeyhint属性が指定されていない場合(またはブラウザが対応していない場合)、ブラウザは表示する既定のEnterキーに対して、表示されるテキストやアイコンの見た目などのラベル(action label)を決定します。
例えば、<input>に使用されているtypeやpattern属性などの状況情報をもとに、ユーザーに対してどのような表示テキストやアイコンの見た目などのラベル(action label)を表示するかが決定されます。
参考にしてください!
仮想キーボードの見た目を明示的に指定するには、inputmode属性を使用してください。
仕様書
| 仕様書 | |
|---|---|
enterkeyhint
|
HTML Standard #attr-enterkeyhint |
ブラウザ互換性
| デスクトップ | ||||
|---|---|---|---|---|
| 属性 |
デスクトップ Chrome
|
デスクトップデスクトップ Edge
|
デスクトップ Firefox
|
Safari
|
enterkeyhint
|
77 | 79 | 94 | 13.1 |
| モバイル | |||
|---|---|---|---|
| 属性 |
モバイル Chrome
|
モバイル Firefox
|
Safari
|
enterkeyhint
|
77 | 97 | 13.4 |