Features of the inputmode attribute for mobile OS and browsers
Hi, Habr! I present to you the translation of the article by Christian Oliff on “Everything You Ever Wanted to Know About inputmode” .
Translator's note: The original title of the article “Everything you ever wanted to know about inputmode” has been changed to “Features of the inputmode attribute for mobile operating systems and browsers”, since the second more accurately conveys the essence.
The inputmode global attribute tells browsers for devices with an on-screen keyboard which option to display when the user selects an input or textarea element.
')
Unlike changing the type of a form, inputmode does not change the way the browser interprets input — it gives the browser instructions on which keyboard to display.
The inputmode attribute has a long history, but only recently it was adopted by leading mobile browsers: Safari for iOS and Chrome for Android. Previously, it was brought to life in Firefox for Android in 2012, but later, after a few months, was removed (although it is still available through the flag). After almost six years, Chrome for Android has built in this property, and with the latest release of iOS 12.2, Safari supports it too.
Browser support for the attribute can be found here . Numbers mean browser version.
Before we delve into the essence of the matter, it should be borne in mind that the WHATWG living standard provides inputmode documentation, whereas the W3C 5.2 spec no longer contains it. Since the WHATWG documents the attribute and browsers are working on its support, we will consider the WHATWG specifications as standard.
Inputmode accepts multiple values. Let's take a look at them one by one.
Let's start with it, because perhaps we will not need any keyboard. Using inputmode = ”none” will not show the keyboard in Chrome for Android. iOS 12.2 will display its alphanumeric keyboard by default, so the none characteristic in this case could be a bit of a reset for iOS.
This is probably one of the most common inputmode values, as it is ideal for input fields that require only numbers — for example, pin codes, postal codes, credit card numbers, etc. Using numeric with type = "text" can make more sense than switching input to type = "number", because inputmode = "numeric" can be used with the maxlength, minlength and pattern attributes, making it more versatile for different occasions.
I have often seen sites that use type = "tel" in the input to display the numeric keypad. This is considered a workaround, but semantically not correct.
Remember that inputmode supports the pattern attribute, we can add pattern = ”\ d *” to input for the same effect. Use this if you are sure that the input should allow you to enter only numbers, because Android (unlike iOS) does not allow the user to access the keyboard with letters, which could accidentally prevent valid data from being entered.
Entering a phone number using a standard alphanumeric keyboard can be difficult. On the telephone keypad, each number key (except 1 and 0) represents three letters (for example, 2 represents A, B, and C), which are located on the same key. The alphanumeric keyboard does not reference these letters, so decoding a phone number containing letters (for example, 1-800-COLLECT) requires additional resources.
Using inputmode with switching to tel will display a standard telephone keypad, including buttons for numbers from 0 to 9, lattice characters and asterisks. Plus we will have alphabetic mnemonic characters (for example ABC).
The inputmode field with switching to decimal leads to small changes for iOS, where the keyboard looks the same as in the case of tel, but the + * # signs are replaced with a decimal point. Android will just use the numeric keypad.
#Email
I am sure that you filled out a form that requires you to enter an email address, which forced you to switch the keyboard only to access the @ symbol. This is not deadly, but certainly not too convenient. This is where the value of email comes in handy. It adds an @ symbol and a decimal point.
Such a keyboard can be useful for those who need to enter the username on Twitter, since @ is the main symbol for identifying users on this social network. Another reason for the use may be if you have your own script for checking email and you do not want to use the validation function built into the browser.
The URL value makes it easiest to add a domain name extension (for example, .com) by pressing a single button; there are also buttons that are commonly used for web addresses, for example, the characters (.) and (/). The extension shown on the keyboard is added to the user's record.
Such a keyboard can be useful to show users that your input field accepts domain names (site.com) as well as full domain addresses (https://site.com).
Use type = ”url” if your input field requires validation of entered characters.
This value displays the blue Go button on iOS and the green Enter on Android, both in the Return field. As you might have guessed by name, search is used for search forms, providing a key to produce a query.
If you would like to show Search instead of Enter in iOS and an icon with a magnifying glass on Android instead of the green arrow, use type = ”search”.
Translator's note: The original title of the article “Everything you ever wanted to know about inputmode” has been changed to “Features of the inputmode attribute for mobile operating systems and browsers”, since the second more accurately conveys the essence.
The inputmode global attribute tells browsers for devices with an on-screen keyboard which option to display when the user selects an input or textarea element.
')
<input type="text" inputmode="" /> <textarea inputmode="" /> Unlike changing the type of a form, inputmode does not change the way the browser interprets input — it gives the browser instructions on which keyboard to display.
The inputmode attribute has a long history, but only recently it was adopted by leading mobile browsers: Safari for iOS and Chrome for Android. Previously, it was brought to life in Firefox for Android in 2012, but later, after a few months, was removed (although it is still available through the flag). After almost six years, Chrome for Android has built in this property, and with the latest release of iOS 12.2, Safari supports it too.
Browser support for the attribute can be found here . Numbers mean browser version.
Before we delve into the essence of the matter, it should be borne in mind that the WHATWG living standard provides inputmode documentation, whereas the W3C 5.2 spec no longer contains it. Since the WHATWG documents the attribute and browsers are working on its support, we will consider the WHATWG specifications as standard.
Inputmode accepts multiple values. Let's take a look at them one by one.
#None
<input type="text" inputmode="none" /> Let's start with it, because perhaps we will not need any keyboard. Using inputmode = ”none” will not show the keyboard in Chrome for Android. iOS 12.2 will display its alphanumeric keyboard by default, so the none characteristic in this case could be a bit of a reset for iOS.
#Numeric
<input type="text" inputmode="numeric" /> This is probably one of the most common inputmode values, as it is ideal for input fields that require only numbers — for example, pin codes, postal codes, credit card numbers, etc. Using numeric with type = "text" can make more sense than switching input to type = "number", because inputmode = "numeric" can be used with the maxlength, minlength and pattern attributes, making it more versatile for different occasions.
I have often seen sites that use type = "tel" in the input to display the numeric keypad. This is considered a workaround, but semantically not correct.
Remember that inputmode supports the pattern attribute, we can add pattern = ”\ d *” to input for the same effect. Use this if you are sure that the input should allow you to enter only numbers, because Android (unlike iOS) does not allow the user to access the keyboard with letters, which could accidentally prevent valid data from being entered.
#Tel
<input type="text" inputmode="tel" /> Entering a phone number using a standard alphanumeric keyboard can be difficult. On the telephone keypad, each number key (except 1 and 0) represents three letters (for example, 2 represents A, B, and C), which are located on the same key. The alphanumeric keyboard does not reference these letters, so decoding a phone number containing letters (for example, 1-800-COLLECT) requires additional resources.
Using inputmode with switching to tel will display a standard telephone keypad, including buttons for numbers from 0 to 9, lattice characters and asterisks. Plus we will have alphabetic mnemonic characters (for example ABC).
#Decimal
<input type="text" inputmode="decimal" /> The inputmode field with switching to decimal leads to small changes for iOS, where the keyboard looks the same as in the case of tel, but the + * # signs are replaced with a decimal point. Android will just use the numeric keypad.
<input type="text" inputmode="email" /> I am sure that you filled out a form that requires you to enter an email address, which forced you to switch the keyboard only to access the @ symbol. This is not deadly, but certainly not too convenient. This is where the value of email comes in handy. It adds an @ symbol and a decimal point.
Such a keyboard can be useful for those who need to enter the username on Twitter, since @ is the main symbol for identifying users on this social network. Another reason for the use may be if you have your own script for checking email and you do not want to use the validation function built into the browser.
#URL
<input type="text" inputmode="url" /> The URL value makes it easiest to add a domain name extension (for example, .com) by pressing a single button; there are also buttons that are commonly used for web addresses, for example, the characters (.) and (/). The extension shown on the keyboard is added to the user's record.
Such a keyboard can be useful to show users that your input field accepts domain names (site.com) as well as full domain addresses (https://site.com).
Use type = ”url” if your input field requires validation of entered characters.
#Search
<input type="text" inputmode="search" /> This value displays the blue Go button on iOS and the green Enter on Android, both in the Return field. As you might have guessed by name, search is used for search forms, providing a key to produce a query.
If you would like to show Search instead of Enter in iOS and an icon with a magnifying glass on Android instead of the green arrow, use type = ”search”.
# What else you need to know
- For Chromium-based browsers on Android, such as Microsoft Edge, Brave and Opera, the same inputmode behavior is typical for Chrome.
- I did not touch the keyboards on the iPad for reasons of brevity. They are similar to the iPhone, only include more buttons. The same is true for Android tablets, with the exception of third-party keyboards, which may be a separate topic that should be covered.
- The originally proposed specification had kana and katakana values for Japanese input, but they were never implemented in any browser and therefore were abolished.
- The Latin-name was also originally one of the inputmode values and was removed. Interestingly, if you use it now in Safari on iOS, it will display the username above the keyboard.
Source: https://habr.com/ru/post/454606/
All Articles