【enterkeyhint属性】enterキーのラベルを指定する。「HTML・属性」- ノブレコ

enterkeyhint属性とは

この属性は、ソフトウェアキーボードの「enterキー」に表示するアクションラベルを指定します。

「enterキー」の表示を変更することで、ユーザー側に分かりやすいインターフェースを提供できます。

「enterキー」の表示を変更するには、以下の属性値と効果があります。

【属性値と効果】

属性値	効果
enter	改行します。
done	入力を完了します。
go	進みます。
next	入力していた入力フィールドの次に入力フィールドに移動します。
previous	入力していた入力フィールドの前に入力フィールドに移動します。
search	検索結果を表示します。
send	入力内容を送信します。

【使用目的】

この属性を使用するときは、スマートフォンなどのソフトウェアキーボードでの、enterキーの表示を変更することができます。

enterキーの表示変更は前述した属性値を効果を参照してください。

その指定した属性値（キーワード）の効果の意味に応じた、ラベルやアイコンの表示をすることができます。

またブラウザには適切なラベルやアイコンを指定することが求められます。

【使用上の注意点】

① フォームの入力欄にenterkeyhint属性を指定する場合。

そのフォームに指定した入力欄がアクティブになった際には、enterキーのラベルが変化します。同じくcontenteditable属性が指定された要素でも、enterkeyhint属性の指定の影響を受けます。

【指定できる要素】

enterkeyhint属性はグローバル属性のため、全てのHTML要素に指定することができます。

ですが、指定したHTML要素との組み合わせ次第では、属性の効果が発揮されないことがあるので注意してください。

【候補となる要素】

フォームコントロールの要素である、<textarea>要素や<input>要素、または、contenteditable属性を使用している要素は、inputmode属性を指定して、どのようなソフトウェアキーボードでを使用するかを制御することができます。

実用例

■enterkeyhint属性の使用例

★enterkeyhint属性の記述例

★表示結果

goの属性値

まとめ

この記事では、enterkeyhiny属性についての解説をいたしました。

この属性は、ソフトウェアキーボードのenterキーのラベルやアイコンを変更する際に使用する属性です。

主にスマホなどの仮想キーボードでの使用が多いかとおもいますが、使用する際には、適切なラベルやアイコンを指定することをお勧めします。

この記事を最後まで読んでいただき、ありがとうございました。またなん🥰