Cómo forzar teclado con números de sitio web para móviles en Android

Question

tengo un sitio web para móviles y tiene algo de HTML input elementos que lo integran, así:

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

que han incorporado el sitio en un WebView para su posible Android 2.1 consumo, 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 elemento HTML input está enfocado?

O, ¿es posible configurarlo para toda la aplicación (tal vez algo en the Manifest file), si no es factible para un elemento HTML?

Answer 1

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

Ambos presentan el teclado numérico cuando la entrada gana enfoque.

<input type="search" /> muestra un teclado normal con un botón de búsqueda adicional

Todo lo demás parece que aparezca el teclado estándar.

Answer 2

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

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

descubrí, que si no he incluido el jquery mobile-marco, el teclado mostró correctamente en los dos tipos de campos.

Pero no he encontrado una solución para resolver ese problema, si realmente necesita usar jquerymobile.

UPDATE: descubrí, que si la etiqueta de formulario se almacena fuera de la

<div data-role="page"> 

el número del teclado no se muestra. Esto debe ser un error ...

Answer 3

NOTA IMPORTANTE

Estoy publicar esto como una respuesta, no un comentario, ya que es bastante importante información y atraerá más atención en este formato.

Como otros compañeros señalaron, se puede forzar un dispositivo para mostrar un teclado numérico con type="number"/type="tel", pero hay que destacar que hay que ser extremadamente cuidadoso con esto.

Si alguien espera un número que empieza con ceros, como 000222, entonces es probable que tenga problemas, ya que algunos navegadores (Chrome de escritorio, por ejemplo) enviará al servidor 222, que no es lo que quiere.

Acerca de type="tel" No puedo decir nada similar, pero personalmente no lo uso, ya que su comportamiento en diferentes teléfonos puede variar.Me he limitado a la simple pattern="[0-9]*" que no funcionan en Android

Answer 4

input type = number

Cuando se desea proporcionar un ingreso de números, se puede utilizar el tipo de entrada HTML5 = "número" valor del atributo.

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

Aquí es el teclado que aparece en el iPhone 4:

iPhone Imagen de HTML5 tipo de entrada número Android 2.2 utiliza este teclado para el tipo = número:

Android Captura de pantalla de HTML5 tipo de entrada número

Answer 5

Añadir un atributo de paso a la entrada del número

<input type="number" step="0.01"> 

Fuente: http://blog.pamelafox.org/2012/05/triggering-numeric-keyboards-with-html5.html

Answer 6

Algunos navegadores igoners que envían cero inicial al servidor cuando el tipo de entrada es "número". Así que yo uso una mezcla de jQuery y HTML para cargar un teclado numérico y también asegurarse de que el valor se envía como texto no como un 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">