inputmode
inputmode hints which virtual keyboard should appear for a field. It improves mobile input by matching the keypad to the expected content, such as email addresses, phone numbers, or numeric codes.
Overview
inputmode hints which virtual keyboard should appear for a field. It improves mobile input by matching the keypad to the expected content, such as email addresses, phone numbers, or numeric codes.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 66 | 79 | 95 | 12.1 | 66 | 12.2 | |
| DOM API | ||||||
| The HTMLElement property inputMode reflects the value of the element's inputmode attribute. | 66 | 79 | 95 | 12.1 | 66 | 12.2 |
- This feature was removed in a later browser version (23)
- Before iOS 13, `inputmode="none"` had no effect.
Syntax
<input inputmode="numeric" pattern="[0-9]*" placeholder="数字のみ">
<input inputmode="decimal" placeholder="小数入力">
<input inputmode="tel" placeholder="電話番号">
<input inputmode="email" placeholder="メールアドレス">
<input inputmode="url" placeholder="URL">Live demo
Mode comparison table
Show how a single text input can suggest different virtual keyboards.
Use cases
Numeric entry
Use inputmode='numeric' for one-time codes, postal codes, or other digit-first fields.
Email and URL fields
Email and URL keyboards surface helpful characters such as @, .com, or / on mobile devices.
Cautions
- inputmode is only a hint. It does not validate the content, so keep the correct input type and validation rules as well.
- Test real devices because virtual keyboard layouts vary across browsers and operating systems.
Accessibility
- Pair inputmode with a clear label and input purpose so users understand both the field meaning and expected format.
- Do not use numeric keyboards for data that may require letters, symbols, or international formats.
Related links
Powered by web-features