입력 모드에 대해 알고 싶었던 모든 것

inputmode 속성은 터치 스크린 장치의 브라우저에 대한 귀중한 힌트를 제공하여 적절한 온 스크린 키보드를 선택하는 데 안내합니다.<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)

위 내용은 입력 모드에 대해 알고 싶었던 모든 것의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!