HTML enterkeyhint Global Attribute

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The enterkeyhint attribute is a global HTML attribute that provides a hint to the browser about what action should be displayed on the virtual keyboard’s Enter key when the user is interacting with an input field or editable element. This attribute is particularly useful on touch devices, such as smartphones and tablets, where the virtual keyboard can change the label or icon of the Enter key to indicate the expected action.

By setting the enterkeyhint attribute, developers can improve user experience by suggesting the appropriate action for the input context, making forms and interactive elements more intuitive.

Use Cases

Form Navigation: When filling out a multi-field form, using enterkeyhint="next" helps guide the user to the next input field instead of submitting the form prematurely.
Messaging Applications: In a chat or messaging app, enterkeyhint="send" can replace the Enter key label with "Send," giving users a clear signal that pressing Enter sends their message.
Search Bars: For a search input, enterkeyhint="search" informs the virtual keyboard to display a search-related key, improving the clarity of the action.
Finalizing Input: If the input represents the final action, like confirming an order or submitting a form, enterkeyhint="done" communicates to the user that pressing Enter completes the task.

Example

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" enterkeyhint="next">

  <label for="password">Password:</label>
  <input type="password" id="password" name="password" enterkeyhint="done">
  
  <button type="submit">Submit</button>
</form>

In this example:

The username input uses enterkeyhint="next", so pressing Enter on the keyboard moves the focus to the password field.
The password input uses enterkeyhint="done", signaling that the user has completed the form.

Syntax

<tag type="text" enterkeyhint="value">

Values

enterDefault action. Indicates that the Enter key inserts a newline or submits the form.
doneSuggests that the input is complete and pressing Enter will finalize input.
goIndicates that pressing Enter will "go" or navigate, typically used for search or navigation inputs.
nextSuggests moving focus to the next input field.
previousSuggests moving focus to the previous input field.
searchIndicates a search action. Often displays a search icon on the keyboard.
sendIndicates sending a message or form submission.
noneNo specific action is suggested; the keyboard will use its default Enter key behavior.

Example

HTML

<form>

  <label for="username">Username:</label>

  <input type="text" id="username" name="username" enterkeyhint="next">

<br><br>

  <label for="password">Password:</label>

  <input type="password" id="password" name="password" enterkeyhint="done">

 

</form>

Result

Editor

Browser Support

The following information will show you the current browser support for the HTML enterkeyhint global attribute. Hover over a browser icon to see the version that first introduced support for this HTML global attribute.