Hola Habr! Le presento la traducción del artículo
"Todo lo que siempre quiso saber sobre el modo de entrada" de Christian Oliff.
Nota del traductor: El título original del artículo "Todo lo que siempre quiso saber sobre inputmode" se ha cambiado a "Características del atributo inputmode para SO y navegadores móviles", ya que el segundo transmite la esencia con mayor precisión.
El atributo global inputmode le dice a los navegadores para dispositivos con un teclado en pantalla qué opción mostrar cuando el usuario selecciona un elemento de entrada o área de texto.
<input type="text" inputmode="" /> <textarea inputmode="" />
A diferencia de cambiar el tipo de formulario, inputmode no cambia la forma en que el navegador interpreta la entrada, sino que le da instrucciones sobre en qué teclado mostrar.
El atributo inputmode tiene una larga historia, pero solo recientemente fue adoptado por los principales navegadores móviles: Safari para iOS y Chrome para Android. Anteriormente, se implementó en Firefox para Android en 2012, pero más tarde, después de unos meses, se eliminó (aunque todavía está disponible a través de la bandera). Después de casi seis años, Chrome para Android construyó esta propiedad, y con la última versión de iOS 12.2, Safari también la admite.
El soporte de atributos del navegador se puede ver
aquí . Los números indican la versión del navegador.
Antes de llegar al resultado final, debemos tener en cuenta que el estándar de vida WHATWG proporciona documentación del modo de entrada, mientras que la especificación W3C 5.2 ya no lo contiene. Dado que el WHATWG documenta el atributo y los navegadores trabajan en su soporte, consideraremos las características técnicas del WHATWG como estándar.
Inputmode toma varios valores. Echemos un vistazo a ellos uno a la vez.
#Ninguno
<input type="text" inputmode="none" />
Comencemos con esto, porque tal vez no necesitamos ningún teclado. El uso de inputmode = "none" no mostrará el teclado en Chrome para Android. iOS 12.2 mostrará su teclado alfanumérico de manera predeterminada, por lo que la característica ninguno en este caso podría ser para iOS algo así como un reinicio.
# Numérico
<input type="text" inputmode="numeric" />
Este es quizás uno de los valores de modo de entrada más comunes, ya que es ideal para campos de entrada que requieren solo números, por ejemplo, códigos PIN, códigos postales, números de tarjetas de crédito, etc. Usar numérico con type = ”text” puede tener más sentido que cambiar la entrada a type = ”number” porque inputmode = ”numeric” puede usarse con los atributos maxlength, minlength y pattern, lo que lo hace más versátil para diferentes ocasiones.
A menudo veía sitios que usaban type = "tel" en un idioma extranjero para mostrar un teclado numérico. Esto se considera una solución, pero es semánticamente incorrecto.
Recuerde que inputmode admite el atributo de patrón, podemos agregar pattern = ”\ d *” a la entrada para obtener el mismo efecto. Use esto si está seguro de que la entrada debe permitir que solo se ingresen números, ya que Android (a diferencia de iOS) no permite que el usuario acceda al teclado con letras, lo que podría interferir accidentalmente con el ingreso de datos válidos.
#Tel
<input type="text" inputmode="tel" />
Ingresar un número de teléfono usando el teclado alfanumérico estándar puede ser difícil. En el teclado del teléfono, cada botón con un número (excepto 1 y 0) representa tres letras (por ejemplo, 2 representa A, B y C) que se encuentran en la misma tecla. El teclado alfanumérico no hace referencia a estas letras, por lo que decodificar un número de teléfono que contiene letras (por ejemplo, 1-800-COLLECT) requiere recursos adicionales.
El uso del modo de entrada con el cambio a tel muestra un teclado telefónico estándar, que incluye botones para números del 0 al 9, signos de asterisco y asteriscos. Además, tendremos caracteres mnemotécnicos alfabéticos (por ejemplo, ABC).
#Decimal
<input type="text" inputmode="decimal" />
El campo inputmode con cambio a decimal conduce a pequeños cambios para iOS, donde el teclado se ve igual que en el caso de tel, pero los signos + * # se reemplazan por un punto decimal. Android solo usará el teclado numérico.
#Email
<input type="text" inputmode="email" />
Estoy seguro de que completó un formulario que requiere la introducción de una dirección de correo electrónico, lo que obligó al teclado a cambiar solo para acceder al símbolo @. Esto no es fatal, pero ciertamente no es demasiado conveniente. Aquí es donde el valor del correo electrónico es útil. Agrega el símbolo @ y el punto decimal.
Tal teclado puede ser útil para aquellos que necesitan ingresar un nombre de usuario en Twitter, ya que @ es el personaje principal para identificar a los usuarios en esta red social. Otra razón de uso puede ser si tiene su propio script para verificar el correo electrónico y no desea utilizar la función de validación integrada en el navegador.
#URL
<input type="text" inputmode="url" />
Un valor de URL facilita la adición de una extensión de nombre de dominio (por ejemplo, .com) presionando un solo botón; También hay botones que se usan comúnmente para direcciones web, por ejemplo, los caracteres (.) y (/). La extensión que se muestra en el teclado se agrega a la entrada del usuario.
Dicho teclado puede ser útil para mostrar a los usuarios que su campo de entrada acepta nombres de dominio (site.com), así como direcciones de dominio totalmente calificadas (https://site.com).
Use type = ”url” si su campo de entrada requiere la validación de los caracteres ingresados.
#Búsqueda
<input type="text" inputmode="search" />
Este valor muestra el botón azul Go en iOS y el botón verde Enter en Android, ambos en lugar de Return. Como puede haber adivinado por el nombre, la búsqueda se utiliza para los formularios de búsqueda, proporcionando una clave para generar una consulta.
Si desea mostrar Buscar en lugar de Intro en iOS y el ícono de lupa en Android en lugar de la flecha verde, use type = "search".
# ¿Qué más necesitas saber?
- Los navegadores basados en Chromium en Android, como Microsoft Edge, Brave y Opera, tienen el mismo comportamiento de modo de entrada que Chrome.
- No toqué los teclados en el iPad por razones de brevedad. Son similares al iPhone, solo incluyen más botones. Lo mismo es cierto para las tabletas Android, con la excepción de los teclados de terceros, que pueden ser un tema aparte que vale la pena destacar.
- Inicialmente, la especificación propuesta tenía significados kana y katakana para la entrada japonesa, pero nunca se implementaron en ningún navegador y, por lo tanto, se descontinuaron.
- El nombre latino también fue originalmente uno de los valores del modo de entrada y se eliminó. Curiosamente, si lo usa ahora en iOS Safari, mostrará el nombre de usuario sobre el teclado.