El modo de entrada es un atributo global HTML (los atributos globales son comunes a todos los elementos HTML) que ayuda a los navegadores o dispositivos con teclados en pantalla a ayudarlos a decidir qué teclado mostrar cuando un usuario ha seleccionado un área para alguna entrada o elemento de área de texto .
- El atributo inputmode no cambia la forma en que el navegador interpreta la entrada. Le indica al navegador qué teclado mostrar de acuerdo con varias entradas.
- El modo de entrada es un concepto muy antiguo, pero solo algunos de los navegadores lo adoptaron. Algunos de los principales navegadores son Safari en iOS y Chrome en Android. Anteriormente, Firefox lo implementó en el año 2012, pero quedó obsoleto después de algunos meses.
- El modo de entrada acepta un número de valores. Echemos un vistazo a ellos uno por uno.
Sintaxis:
<input type ="number" id="age" inputmode="numeric" />
El atributo inputmode puede tener los siguientes valores.
- Ninguna:
<input type="text" inputmode="none" />
El valor none implica que se mostrará ‘no’ en el teclado en pantalla. Esto se utiliza en aquellos casos en los que el navegador o cualquier aplicación está manejando el VK (teclado virtual) por sí mismo (autocodificado).
- Texto:
<input type="text" inputmode="text" />
El texto del valor muestra el teclado estándar específico de la configuración regional.
modo de entrada = texto en Android 11
- Numérico:
<input type="text" inputmode="numeric" />
El valor numérico asegura que los dígitos del 0 al 9 se muestren en el teclado en pantalla. La tecla ‘menos’ puede mostrarse o no.
modo de entrada = numérico en Android 11
- Decimal:
<input type="text" inputmode="decimal" />
El valor decimal asegura que, junto con los dígitos del 0 al 9, se debe mostrar el separador decimal específico de la configuración regional («.» o «,»). La tecla ‘menos’ puede mostrarse o no.
modo de entrada = decimal en Android 11
- teléfono:
<input type="text" inputmode="tel" />
El valor tel muestra el teclado numérico en pantalla junto con las teclas de almohadilla (*) y asterisco (*). Se utiliza para introducir números de teléfono.
modo de entrada = teléfono en Android 11
- búsqueda:
<input type="text" inputmode="search" />
La búsqueda de valor aseguraque el teclado en pantalla debe tener un diseño que sea conveniente para realizar búsquedas, dicho diseño tiene una tecla » Intro » etiquetada como » Buscar » o tal vez cualquier ícono de búsqueda o similar.
modo de entrada = búsqueda en Android 11
- Email:
<input type="text" inputmode="email" />
El correo electrónico de valor asegura que el teclado en pantalla debe mostrar el carácter » @ «, lo que facilitará al usuario la entrada de correo electrónico.
modo de entrada = correo electrónico en Android 11
- URL:
<input type="text" inputmode="url" />
El valor url asegura que el teclado en pantalla debe mostrar el carácter » / » que facilitará al usuario ingresar la URL.
modo de entrada = URL en Android 11
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>HTML inputmode Attribute</title> </head> <body> <h1 style="color:green;"> GeeksforGeeks </h1> <h3>HTML inputmode Attribute</h3> Name : <input type="text" id="text" inputmode="text" /><br><br> Phone No. : <input type="tel" id="phone" inputmode="tel" /><br><br> Email : <input type="email" id="email" inputmode="email" /><br><br> Age : <input type="number" id="age" inputmode="numeric" /><br><br> Search : <input type="search" id="search" inputmode="search" /><br><br> URL : <input type="url" id="url" inputmode="url" /><br><br> </body> </html>
Producción:
ventajas:
El uso de atributos de modo de entrada es imprescindible cuando se trata de cuadros de texto, ya que aumenta la facilidad de entrada del usuario.
Navegadores compatibles:
- Chrome: compatible con 66 y superior.
- Edge: compatible con 79 y superior.
- Firefox: compatible con 95 y superior.
- Opera: compatible con 53 y superior.
Publicación traducida automáticamente
Artículo escrito por thenavneet y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA