The inputmode
attribute defines the type of virtual keyboard to use when an input element has focus.
This attribute is for pages that are viewed on portable devices.
An inputmode
attribute on an <input> element.
On a portable device, this input field requires a numeric virtual keyboard.
<input inputmode="numeric"
type="text" name="cost"
placeholder="Enter cost" />
On an iPhone, when this field receives focus, you may see a keyboard like this:
The inputmode
attribute specifies the type of keyboard to display when the element has focus.
Virtual keyboards are used in mobile devices, tablets, touch screens, and others.
This attribute has no effect on the desktop with a regular keyboard.
Note: The inputmode
is a global attribute that can be applied to any tag.
Tip: Not all browsers support inputmode
.
<tag inputmode="none | text | decimal | numeric | tel | search | email | url" />
Value | Description |
---|---|
none | Renders a system virtual keyboard. |
text | Displays a standard virtual keyboard. This is the default. |
decimal | Fractional numeric input with numbers, decimal separator (. or ,), and minus. |
numeric | Numeric input with numbers from 0 to 9. |
tel | Telephone input with numbers, asterisk (*), and pound (#) keys. |
search | A keyboard for search input. May display an Enter or Go key. |
A keyboard optimized for email, with '@', and possibly a '.com' key. | |
url | A virtual keyboard for URLs with history access, '/' and possibly a '.com' key. |
Here is when inputmode
support started for each browser:
Chrome
|
68.0 | Jul 2018 |
Firefox
|
20.0 | Apr 2013 |
Edge
|
79.0 | Jan 2020 |
Opera
|
Not Supported | |
Safari
|
Not Supported |