Cómo forzar el teclado con números en un sitio web móvil en Android

91

Tengo un sitio web móvil y tiene algunos inputelementos HTML , como este:

<input type="text" name="txtAccessoryCost" size="6" />

He incrustado el sitio en un WebViewposible 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 inputelemento 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?

ncakmak
fuente
Si desea un teclado numérico en iOS además de Android, debe hacer esto: stackoverflow.com/a/31619311/806956
Aaron Gray
2
El 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 sugiere type="number", que viene con algunas de sus propias trampas; inputmodeparece afectar solo a la pantalla del teclado virtual, en lugar del comportamiento / restricciones de la entrada en sí.
SheffDoinWork

Respuestas:

112
<input type="number" />
<input type="tel" />

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 adicional

Todo lo demás parece mostrar el teclado estándar.

Richard Kernahan
fuente
Lo revisaremos hoy y luego le informaremos si funcionaría. ¡Gracias, Richard!
ncakmak
1
Hola Richard. Ninguno funcionó, el campo de entrada aún abre el teclado estándar.
ncakmak
1
Tenga en cuenta que el teclado para type="tel"es peor para escribir números que el teclado para type="number".
Rory O'Kane
2
<input type="text" pattern="\d*" /> también muestra el teclado numérico, pero solo en iOS, no en Android .
Rory O'Kane
50

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 servidor 222, 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 simple pattern="[0-9]*"que no funciona en Android

user907860
fuente
4
El reformateo automático probablemente no ocurra con type="tel". La especificación señala que telno aplica ninguna sintaxis en particular, a diferencia de lo numberque requiere que su valor sea un número de punto flotante válido .
Rory O'Kane
¿Qué tan malo es? Estamos tratando de acelerar el proceso de formulario para nuestros clientes móviles y esto parece una solución obvia, pero también queremos algo confiable. Publicó una fuerte advertencia contra el uso de este método. Me pregunto si podría explicarlo un poco más.
Philll_t
@Philll_t, un usuario necesita enviar datos '000222', pero usted en el lado del servidor obtiene '222'. ¿No ves que la funcionalidad está completamente rota? El servidor obtiene datos incorrectos.
user907860
Sí, veo lo que quieres decir, pero lo que digo es eso: ¿qué porcentaje de usuarios ven esto? ¿Es esto un problema en los principales navegadores móviles como Safari y Chrome? ¿Cómo sabe que esto es un problema? ¿Hay algún enlace que pueda proporcionar? Te creo, solo quiero investigar por mí mismo y no he visto nada que sugiera esto, tal vez puedas indicarme la dirección correcta. Solo estamos tratando de ver si nuestra base de clientes no se beneficiará de esto.
Philll_t
1
@Philll_t Creo que el mejor ejemplo de esta advertencia es para los campos de entrada de Fecha de nacimiento. Donde necesita ingresar manualmente el día, mes y año. Y sí, todavía hay muchos sitios web que usan este estilo en lugar de los selectores de fechas de uso común. Con respecto al problema en los campos de entrada de fecha de nacimiento, es cuando ingresa su día o mes comenzando con "0", por ejemplo, 08.
Robin Carlo Catacutan
8

Esto debería funcionar. Pero tengo los mismos problemas en un teléfono Android.

<input type="number" /> <input type="tel" />

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

<div data-role="page"> 

No se muestra el teclado numérico. Esto debe ser un insecto...

Jesper Grann Laursen
fuente
Gracias por investigar esto. Sin embargo, no estoy seguro de entender: "si la etiqueta de formulario se almacena fuera del div [data-role = page]". En mi caso, el problema ocurre con formularios que están bien anidados dentro de un div [data-role = page]. ¿Quizás el problema es que estas páginas se muestran, en mi caso, como diálogos?
Wytze
6

inputmodede acuerdo con la especificación WHATWG es el método predeterminado.

Para los dispositivos iOS, la adición patterntambién podría ayudar.

typeTambién para compatibilidad con versiones anteriores , ya que Chrome los usa a partir de la versión 66.

<input
  inputmode="numeric"
  pattern="[0-9]*"
  type="number"
/>
Reza Ghorbani
fuente
Gracias por la respuesta, estaba buscando decimaly la encontré aquí developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/…
Rami Alloush
2

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:

$(document).ready(function(){
$(".numberonly").focus(function(){$(this).attr("type","number")});
$(".numberonly").blur(function(){$(this).attr("type","text")});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="numberonly">

Ali Sheikhpour
fuente
3
Esto causa un problema molesto en Chrome para Android. Cuando toca la entrada, el teclado no aparece. Luego debe tocar el cuadro de texto por segunda vez y luego el teclado aparece con el teclado de solo números. Realmente desearía tener una 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).
Jaxidian
2
¡Yo también enfrento el mismo problema! establecer el campo en "type = tel" es la mejor solución hasta ahora.
Ali Sheikhpour
-2

input type = number

Cuando desee proporcionar una entrada numérica, puede utilizar el valor de atributo de HTML5 input type = "number".

<input type="number" name="n" />

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

avinash pandit
fuente