inputmode屬性為觸摸屏設(shè)備上的瀏覽器提供了一個(gè)有價(jià)值的提示，從而指導(dǎo)它們選擇適當(dāng)?shù)钠聊绘I盤<input>和<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)

以上是您想知道的有關(guān)輸入模式的一切的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！