Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
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".
Chat input
<label for="message">Message</label><input type="text" id="message" enterkeyhint="send" placeholder="Type a message..." />Search Box
Pair enterkeyhint="search" with inputmode="search" for the full mobile search experience.
Search box
<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.
Multi-field form
<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.
URL bar
<label for="url-bar">Go to URL</label><input type="url" id="url-bar" enterkeyhint="go" inputmode="url" placeholder="https://..." />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.
Textarea with enterkeyhint
<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.
Handling the Enter key
const input = document.querySelector('#message'); // enterkeyhint is cosmetic — you still need a handlerinput.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.
See Also
inputmodeto control which virtual keyboard appearsautocompletefor browser autofill hints<input>element reference<textarea>element reference