Frontend Development
February 22, 2025
6 min

Understanding the enterkeyhint Attribute in HTML: Enhancing Virtual Keyboard UX

Learn how the enterkeyhint attribute customizes the Enter key label in virtual keyboards, improving user experience across different input fields.

BU

Balaji Udayagiri

Front End Lead Engineer

Technologies Used

HTML JavaScript

Summary

The enterkeyhint attribute in HTML customizes the Enter key label on virtual keyboards based on user intent. It enhances accessibility and user experience, particularly for mobile and touch devices.

Key Points

  • The enterkeyhint attribute provides a hint for virtual keyboard Enter key behavior.
  • It improves usability by displaying context-appropriate labels/icons.
  • Supports predefined values like 'enter', 'done', 'go', 'next', 'previous', 'search', and 'send'.
  • Works best when combined with inputmode for better UX.
  • Browser support varies; testing is essential.

Code Examples

Basic Example: Using enterkeyhint in an Input Field

<input type="text" enterkeyhint="send" placeholder="Type a message...">

Using enterkeyhint with a Textarea

<textarea enterkeyhint="next" placeholder="Write your comment..."></textarea>

References

Related Topics

HTML AttributesVirtual KeyboardsAccessibilityUser Experience (UX)