# The “inputmode” attribute is not supported in all browsers. Please be sure to test, and consider using a polyfill.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-inputmode-attribute-is-not-supported-in-all-browsers-please-be-sure-to-test-and-consider-using-a-polyfill
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `inputmode` attribute is a global attribute that can be applied to any element that is editable, including `<input>` elements and elements with `contenteditable`. It tells the browser which type of virtual keyboard to present—for example, a numeric keypad, a telephone dialpad, or a URL-optimized keyboard. This is particularly useful on mobile devices where the on-screen keyboard can be tailored to the expected input.

The W3C validator raises this as an informational warning, not an error. The `inputmode` attribute is part of the WHATWG HTML Living Standard and is valid HTML. However, the validator flags it because browser support, while now quite broad, has historically been inconsistent. Older versions of Safari, Firefox, and some less common browsers lacked support for certain `inputmode` values. When `inputmode` is not recognized, the browser simply ignores it and shows the default keyboard—so it degrades gracefully and won't break your page.

The valid values for `inputmode` are:

- **`none`** — No virtual keyboard; useful when the page provides its own input interface.
- **`text`** — Standard text keyboard (the default).
- **`decimal`** — Numeric keyboard with a decimal separator, ideal for fractional numbers.
- **`numeric`** — Numeric keyboard without a decimal separator, ideal for PINs or zip codes.
- **`tel`** — Telephone keypad layout with digits 0–9, `*`, and `#`.
- **`search`** — A keyboard optimized for search input, which may include a "Search" or "Go" button.
- **`email`** — A keyboard optimized for email entry, typically including `@` and `.` prominently.
- **`url`** — A keyboard optimized for URL entry, typically including `/` and `.com`.

It's important to understand the difference between `inputmode` and the `type` attribute. The `type` attribute on `<input>` defines the **semantics and validation behavior** of the field (e.g., `type="email"` validates that the value looks like an email address). The `inputmode` attribute **only** affects the virtual keyboard hint and has no impact on validation or semantics. This makes `inputmode` especially useful when you need a specific keyboard but the field type doesn't match—for example, a numeric PIN field that should remain `type="text"` to avoid the spinner controls that come with `type="number"`.

## How to fix it

Since this is a warning rather than an error, no fix is strictly required. However, you should:

1. **Test on your target browsers and devices** to confirm the virtual keyboard behaves as expected.
2. **Pair `inputmode` with the appropriate `type` and `pattern` attributes** to ensure proper validation and semantics, since `inputmode` alone does not enforce any input constraints.
3. **Accept graceful degradation** — in browsers that don't support `inputmode`, users will simply see the default keyboard, which is still functional.

There is no widely adopted polyfill for `inputmode` because it controls a browser-native UI feature (the virtual keyboard) that JavaScript cannot directly replicate. The best strategy is to treat it as a progressive enhancement.

## Examples

### Using `inputmode` for a numeric PIN field

This example triggers the validator warning. The code is valid, but the validator advises caution:

```html
<label for="pin">Enter your PIN:</label>
<input id="pin" type="text" inputmode="numeric" pattern="[0-9]*">
```

Here, `type="text"` keeps the field free of number-spinner controls, `inputmode="numeric"` requests a numeric keypad on mobile, and `pattern="[0-9]*"` provides client-side validation. This combination is the recommended approach for PIN or verification code fields.

### Using `inputmode` for a currency amount

```html
<label for="amount">Amount ($):</label>
<input id="amount" type="text" inputmode="decimal" pattern="[0-9]*\.?[0-9]{0,2}">
```

The `decimal` value displays a numeric keyboard that includes a decimal point, which is ideal for monetary values.

### Falling back to `type` when `inputmode` is unnecessary

If the semantic input type already provides the correct keyboard, you don't need `inputmode` at all:

```html
<label for="email">Email address:</label>
<input id="email" type="email">

<label for="phone">Phone number:</label>
<input id="phone" type="tel">

<label for="website">Website:</label>
<input id="website" type="url">
```

Using the appropriate `type` gives you both the optimized keyboard **and** built-in browser validation, making `inputmode` redundant in these cases.

### Using `inputmode` on a contenteditable element

The `inputmode` attribute also works on non-input elements that accept user input:

```html
<div contenteditable="true" inputmode="numeric">
  Enter a number here
</div>
```

This is one scenario where `inputmode` is especially valuable, since `contenteditable` elements don't have a `type` attribute to influence the keyboard.