Everything You Ever Wanted to Know About inputmode

The inputmode attribute provides a valuable hint to browsers on touchscreen devices, guiding them in selecting the appropriate onscreen keyboard for <input> and <textarea></textarea> elements. Unlike altering the input type, inputmode solely dictates keyboard display, not input interpretation.

While possessing a lengthy history, widespread adoption by major mobile browsers (Safari and Chrome) is relatively recent. Prior implementations in Firefox for Android were short-lived. This support, detailed on caniuse.com, shows version-specific compatibility. Note that my testing suggests Opera Mini and Opera Mobile support contradicts caniuse data.

Although the WHATWG specification documents inputmode, the W3C 5.2 spec omits it, hinting at potential obsolescence. However, given WHATWG documentation and browser support, we'll consider the WHATWG standard.

inputmode accepts several values:

none

This value prevents keyboard display in Chrome for Android, though iOS 12.2 shows its default keyboard. It's intended for inputs with custom keyboard controls.

numeric

Highly useful for numerical inputs (PINs, zip codes, etc.). Unlike type="number", it allows maxlength, minlength, and pattern attributes, enhancing versatility. While often used with type="tel", this is semantically incorrect. The pattern="\d*" attribute provides a similar effect but limits input strictly to numbers; Android doesn't allow switching to an alphanumeric keyboard, potentially blocking valid entries.

tel

Optimizes telephone number input. It provides a standard telephone keypad (0-9, #, *) with alphabetic mnemonics (ABC, DEF, etc.).

decimal

Produces a keyboard similar to tel on iOS, replacing the * # key with a decimal point. Android uses the standard numeric keyboard.

email

Includes the @ and . characters, improving email address entry. iOS's email suggestions might cause confusion. Useful for custom email validation.

url

Facilitates URL entry by including common web address characters (., /) and locale-specific TLDs. Use type="url" for input validation.

search

Displays a "Go" (iOS) or "Enter" (Android) key, ideal for search forms. type="search" offers alternative visual cues.

Additional Notes

• Chromium-based Android browsers (Edge, Brave, Opera) mirror Chrome's inputmode behavior.
• iPad and Android tablet behavior largely mirrors iPhone and Android phones, respectively, excluding third-party keyboards.
• kana, katakana, and latin-name values from earlier specifications are no longer implemented. Interestingly, latin-name on iOS suggests the user's name.

Demo

A live demo showcasing these inputmode variations is available (link to be provided if a demo is created).

References

• WHATWG specification
• MDN documentation
• caniuse.com
• Chrome Platform Status (Chromium Ticket #244688)

The above is the detailed content of Everything You Ever Wanted to Know About inputmode. For more information, please follow other related articles on the PHP Chinese website!