The inputmode attribute defines the type of virtual keyboard to use when an input element has focus. This attribute is primarily pages that are viewed on portable devices.
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:
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.
inputmode is a global attribute that can be applied to any tag.
Tip: Not all browsers support
<tag inputmode="none | text | decimal | numeric | tel | search | email | url" />
|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: