Better mobile keyboards without JavaScript
Mobile users got stuck with the default text keyboard on every input, or developers shipped JS workarounds to detect device type. inputmode and enterkeyhint let HTML request the right keyboard directly.
2<input type="text" inputmode="numeric" />
3
4<!-- Search keyboard with Search return key -->
5<input type="search" inputmode="search" enterkeyhint="search" />
2<input type="tel" pattern="[0-9]*" />
3
4/* No way to control the return key label */
5if (/Mobi/.test(navigator.userAgent)) {
6 submitBtn.textContent = 'Search';
7}
Browser Support for Inputmode
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2024.
Your first month is free
Managed WordPress hosting for faster sites.
Right keyboard, right type
inputmode controls the virtual keyboard independently from input type. Get a numeric pad while keeping type=text validation — no type=tel hack needed.
Custom return key
enterkeyhint labels the return key: go, done, next, search, send. Users know what happens when they tap it.
Works on contenteditable too
Both attributes work on contenteditable elements, not just inputs. Useful for rich text editors and custom input components.
How it works
inputmode hints which virtual keyboard to show. Values: none (no keyboard), text (default), decimal (number with decimal point), numeric (digits only), tel, search, email, url. It does not affect the input type or validation.
enterkeyhint controls the label on the return/enter key of the virtual keyboard. Values: enter, done, go, next, previous, search, send. Browsers may ignore it if the key is not customizable.
The key distinction between inputmode and type: type affects browser validation and the submitted value format. inputmode only affects the keyboard — no validation, no format change. Use inputmode="numeric" when you want digits but need to accept leading zeros or dashes that type="number" would reject.