Tengo un sitio web móvil y tiene algunos input
elementos HTML , como este:
<input type="text" name="txtAccessoryCost" size="6" />
He incrustado el sitio en un WebView
posible consumo de Android 2.1, por lo que también será una aplicación de Android.
¿Es posible obtener el teclado con números en lugar del predeterminado con letras cuando este input
elemento HTML está enfocado?
¿O es posible configurarlo para toda la aplicación (tal vez algo en el archivo de manifiesto ), si no es factible para un elemento HTML?
inputmode="number"
atributo parece ser la respuesta correcta a finales de 2019: developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/… . La respuesta más votada en el momento de este comentario sugieretype="number"
, que viene con algunas de sus propias trampas;inputmode
parece afectar solo a la pantalla del teclado virtual, en lugar del comportamiento / restricciones de la entrada en sí.Respuestas:
Ambos presentan el teclado numérico cuando la entrada gana el foco.
<input type="search" />
muestra un teclado normal con un botón de búsqueda adicionalTodo lo demás parece mostrar el teclado estándar.
fuente
input
type
s de la especificación HTML , incluidosnumber
ytel
.type="tel"
es peor para escribir números que el teclado paratype="number"
.<input type="text" pattern="\d*" />
también muestra el teclado numérico, pero solo en iOS, no en Android .NOTA IMPORTANTE
Estoy publicando esto como una respuesta, no como un comentario, ya que es información bastante importante y atraerá más atención en este formato.
Como señalaron otros compañeros, puede forzar un dispositivo para que le muestre un teclado numérico con
type="number"
/type="tel"
, pero debo enfatizar que debe ser extremadamente cauteloso con esto.Si alguien espera un número que comienza con ceros, como
000222
, entonces es probable que tenga problemas, ya que algunos navegadores (Chrome de escritorio, por ejemplo) enviarán al servidor222
, que no es lo que ella quiere.Sobre
type="tel"
no puedo decir nada parecido pero personalmente no lo uso, ya que su comportamiento en distintos teléfonos puede variar. Me he limitado a lo simplepattern="[0-9]*"
que no funciona en Androidfuente
type="tel"
. La especificación señala quetel
no aplica ninguna sintaxis en particular, a diferencia de lonumber
que requiere que su valor sea un número de punto flotante válido .Esto debería funcionar. Pero tengo los mismos problemas en un teléfono Android.
Descubrí que si no incluía jquerymobile-framework, el teclado se mostraba correctamente en los dos tipos de campos.
Pero no he encontrado una solución para resolver ese problema, si realmente necesita usar jquerymobile.ACTUALIZACIÓN: descubrí que si la etiqueta de formulario se almacena fuera del
No se muestra el teclado numérico. Esto debe ser un insecto...
fuente
inputmode
de acuerdo con la especificación WHATWG es el método predeterminado.Para los dispositivos iOS, la adición
pattern
también podría ayudar.type
También para compatibilidad con versiones anteriores , ya que Chrome los usa a partir de la versión 66.fuente
decimal
y la encontré aquí developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/…Algunos navegadores ignoran el envío de un cero a la izquierda al servidor cuando el tipo de entrada es "número". Entonces uso una combinación de jquery y html para cargar un teclado numérico y también me aseguro de que el valor se envíe como texto, no como número:
fuente
type="digits"
opción para no tener que tener estos trucos. Quiero decir, no es que un número inicial de cero sea tan raro (los códigos postales en los EE. UU. Son un ejemplo obvio).input type = number
Cuando desee proporcionar una entrada numérica, puede utilizar el valor de atributo de HTML5 input type = "number".
Aquí está el teclado que aparece en el iPhone 4:
Captura de pantalla del iPhone del número de tipo de entrada HTML5 Android 2.2 usa este teclado para type = number:
Captura de pantalla de Android del número de tipo de entrada HTML5
fuente
Agregue un atributo de paso a la entrada numérica
Fuente: http://blog.pamelafox.org/2012/05/triggering-numeric-keyboards-with-html5.html
fuente