Definition and Usage
The enterkeyhint attribute explicitly specifies the text or icon label (action label) displayed on the Enter key of virtual keyboards.
This attribute provides users with a more useful hint about the expected action when they press the Enter key.
This attribute explicitly specifies the most appropriate hint for the Enter key on virtual keyboards, which provides a more useful user experience (UX), especially in mobile environments.
Additional Explanation
The contenteditable attribute
specifies whether the content of an element is editable.
When this attribute is set to true, the element's content can be edited,
and when set to false, the content cannot be edited.
Basic Example
When you set the enterkeyhint attribute to "done" as shown in the example above, the browser will display a hint on the Enter key label, as seen in the screenshot below.
Note:
The appearance and user interface of the virtual keyboard may vary depending on the device, browser, and user language settings.
enterkeyhint Attribute Values
enterkeyhint="enter" |
Indicates a hint for an "enter" action, which inserts a new line. |
|---|---|
enterkeyhint="done" |
Indicates a hint for a "done" action. This is commonly used when the user has finished entering text and the IME (Input Method Editor) will close. |
enterkeyhint="go" |
Indicates a hint for a "go" action, meaning the user will be taken to the destination related to the entered text. |
enterkeyhint="next" |
Indicates a hint for a "next" action, typically moving the user to the next text-input field. |
enterkeyhint="previous" |
Indicates a hint for a "previous" action, typically moving the user to the previous text-input field. |
enterkeyhint="search" |
Indicates a hint for a "search" action, typically initiating a search based on the entered text. |
enterkeyhint="send" |
Indicates a hint for a "send" action, meaning the entered text will be sent to another party. |
Note:
If the enterkeyhint attribute is not specified (or is unsupported by the browser), the browser determines the label (action label) for the Enter key, including the text or icon to display.
For example, the browser may use contextual information such as the type or pattern attributes on an <input> element to decide which text or icon label (action label) to present to the user.
Note:
To explicitly specify the appearance of a virtual keyboard, use the inputmode attribute.
Specifications
| Specification | |
|---|---|
enterkeyhint
|
HTML Standard #attr-enterkeyhint |
Browser compatibility
| Desktop | ||||
|---|---|---|---|---|
| Attribute |
Desktop Chrome
|
DesktopDesktop Edge
|
Desktop Firefox
|
Safari
|
enterkeyhint
|
77 | 79 | 94 | 13.1 |
| Mobile | |||
|---|---|---|---|
| Attribute |
Mobile Chrome
|
Mobile Firefox
|
Safari
|
enterkeyhint
|
77 | 97 | 13.4 |