enterkeyhint

Controls the label on the Enter key of the virtual keyboard, giving users a visual cue about what pressing Enter will do.

Overview

The enterkeyhint attribute controls the label displayed on the Enter key of the virtual keyboard. It gives users a visual cue about what pressing Enter will do — "Search", "Send", "Next", and so on.

This is a cosmetic hint only. It changes the label on the key but does not change what Enter actually does. You still need JavaScript event handlers if you want custom behavior when the user presses Enter.

Applies to: <input>, <textarea>, and any element with contenteditable

Values

Value	Key Label	Use When
`enter`	Generic Enter / Return	Default behavior. No specific action implied.
`done`	Done	The user is finishing input. Typically closes the keyboard or submits a single-field form.
`go`	Go	Navigating to a URL or taking the user somewhere. URL bars, navigation inputs.
`next`	Next	Moving to the next field in a multi-step form. Mid-form fields.
`previous`	Previous	Moving to the previous field. Rare, but useful in wizard-style forms with back navigation.
`search`	Search	Executing a search query. Search boxes and filter fields.
`send`	Send	Sending a message. Chat inputs, comment fields, email compose.

Practical Examples

Chat Input

A messaging input where Enter should visually suggest "Send".

<label for="message">Message</label> <input type="text" id="message" enterkeyhint="send" placeholder="Type a message..." />

Message

Search Box

Pair enterkeyhint="search" with inputmode="search" for the full mobile search experience.

<label for="search">Search</label> <input type="search" id="search" enterkeyhint="search" inputmode="search" placeholder="Search articles..." />

Multi-Field Form

Use next on intermediate fields and done on the last field. This tells the user whether there are more fields to fill or if they are finished.

<form class="stacked"> <label for="first-name">First name</label> <input type="text" id="first-name" enterkeyhint="next" autocomplete="given-name" /> <label for="last-name">Last name</label> <input type="text" id="last-name" enterkeyhint="next" autocomplete="family-name" /> <label for="user-email">Email</label> <input type="email" id="user-email" enterkeyhint="done" autocomplete="email" /> <button type="submit">Submit</button> </form>

URL Navigation

For an address bar or any input that navigates the user somewhere, go is the right label.

Textarea

The attribute works on <textarea> too, though note that Enter typically inserts a newline in textareas. The hint helps users understand what a special submit action (like Ctrl+Enter) might do.

<label for="notes">Notes</label> <textarea id="notes" enterkeyhint="done" rows="4" placeholder="Write your notes..."></textarea>

You Still Need JavaScript

The enterkeyhint attribute is purely cosmetic. Changing the label to "Send" does not make Enter send anything. You must attach your own event handler to implement the action.

const input = document.querySelector('#message'); // enterkeyhint is cosmetic — you still need a handler input.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); sendMessage(input.value); input.value = ''; } });

For forms, this is less of an issue — pressing Enter in an input inside a <form> already triggers form submission natively. The enterkeyhint just makes the button label match the user's expectation.

Platform Differences

iOS Safari: Displays the exact label text ("Send", "Search", etc.) on the return key. Well-supported.
Android: Shows an icon or label depending on the keyboard app. Most major keyboards (Gboard, Samsung Keyboard) support all values.
Desktop: No visible effect. The attribute is ignored since there is no virtual keyboard. It is safe to use everywhere.