Teléfono: teclado numérico para la entrada de texto

¿Hay alguna manera de forzar que el teclado numérico aparezca en el teléfono para un ? Me acabo de dar cuenta de que en HTML5 es para “números flotantes”, por lo que no es adecuado para números de tarjetas de crédito, códigos postales, etc.

Quiero emular la funcionalidad del teclado numérico de , para las entradas que toman valores numéricos distintos de los números de coma flotante. ¿Hay, quizás, otro tipo de input apropiado que haga eso?

Puede hacer . Esto hará que aparezca el teclado numérico.

Consulte aquí para obtener más detalles: Guía de progtwigción de texto, web y edición para iOS

A mediados de 2015, creo que esta es la mejor solución:

  

Esto le dará el teclado numérico tanto en Android como en iOS:

enter image description here

También le proporciona el comportamiento de escritorio esperado con los botones de flecha arriba / abajo y la tecla de flecha arriba / abajo que se incrementan:

enter image description here

Combinando tanto type="number" como pattern="[0-9]* , obtenemos una solución que funciona en todas partes. Y es compatible con el futuro HTML 5.1 propuesto en el modo inputmode .

Nota: El uso de un patrón activará la validación del formulario nativo del navegador. Puede deshabilitar esto utilizando el atributo novalidate , o puede personalizar el mensaje de error para una validación fallida utilizando el atributo de title .


Si necesita poder ingresar ceros, comas o letras principales, por ejemplo, códigos postales internacionales, consulte esta pequeña variante .


Créditos y lecturas adicionales:

http://www.smashingmagazine.com/2015/05/form-inputs-browser-support-issue/ http://danielfriesen.name/blog/2013/09/19/input-type-number-and-ios- teclado numérico/

He descubierto que, al menos para campos tipo “código de acceso”, hacer algo como termina produciendo el campo orientado al número más auténtico y también tiene la ventaja de no tener auto-formato . Por ejemplo, en una aplicación móvil que desarrollé recientemente para Hilton, terminé yendo con esto:

Pantalla de aplicación web iPhone con una etiqueta de entrada que tiene un tipo de TEL que produce un teclado numérico muy decente como opuesto a un número de tipo que está auto-formato y tiene una configuración de entrada algo menos intuitiva

… y mi cliente estaba muy impresionado.

Usar el type="email" o type="url" le dará como mínimo un teclado en algunos teléfonos, como iPhone. Para los números de teléfono, puede usar type="tel" .

Existe un peligro al usar el para que aparezca el teclado numérico. En Firefox y Chrome, la expresión regular contenida dentro del patrón hace que el navegador valide la entrada a esa expresión. Se producirán errores si no coincide con el patrón o si se deja en blanco. Tenga en cuenta las acciones involuntarias en otros navegadores.

Creo que type="number" es lo mejor para la página web semántica. Si solo desea cambiar el teclado, puede usar type="number" o type="tel" . En ambos casos, iPhone no restringe la entrada del usuario. El usuario todavía puede escribir (o pegar) los caracteres que quiera. El único cambio es el teclado que se muestra al usuario. Si desea alguna restricción más allá de esto, necesita usar JavaScript.

Para mí, la mejor solución fue:

Para números enteros, que muestra la almohadilla 0-9 en Android y iPhone

  

También es posible que desee hacer esto para ocultar los rotuladores en firefox / crome / safari, la mayoría de los clientes piensan que se ven feos

  input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance:textfield; } 

Y agrega novalidate = ‘novalidate’ a tu elemento de formulario, si haces una validación personalizada

PD, en caso de que en realidad quisiera números de coma flotante, pase a la precisión que desee, agregará ‘.’ a Android

  

En 2018:

  

funciona tanto para Android como para iOS.

Probé en Android (^ 4.2) e iOS (11.3)

Puedes intentarlo así:

   

Pero tenga cuidado: si su entrada contiene algo que no sea un número, no se transmitirá al servidor.

No pude encontrar el tipo que funcionaba mejor para mí en todas las situaciones: tenía que ingresar por defecto a la entrada numérica (por ejemplo, la entrada de “7.5”), pero también permitía en ciertos momentos el texto (“pase”, por ejemplo). Los usuarios querían un teclado numérico (entrada de 7.5, por ejemplo), pero se requería la entrada de texto ocasional (“pase”, por ejemplo).

Más bien, lo que hice fue agregar una checkbox al formulario y permitir al usuario alternar mi entrada (id = “inputSult”) entre type = “number” y type = “text”.

   

Luego conecté un controlador de clic a la checkbox que alterna el tipo entre el texto y el número en función de si la checkbox de arriba está marcada:

 $(document).ready(function () { var cb = document.getElementById('cbAllowTextResults'); cb.onclick = function (event) { if ($("#cbAllowTextResults").is(":checked")) $("#result").attr("type", "text"); else $("#result").attr("type", "number"); } }); 

Esto funcionó bien para nosotros.