teclados - teclado t9 para android

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

Question

¿Hay alguna manera de forzar que el teclado numérico aparezca en el teléfono para un <input type="text"> ? Me acabo de dar cuenta de que <input type="number"> 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 <input type="number"> , 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?

Answer 1

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

<input type="number" pattern="[0-9]*" inputmode="numeric">

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

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:

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-numeric-keypad/

Answer 2

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.

Answer 3

En 2018:

<input type="number" pattern="/d*">

funciona tanto para Android como para iOS.

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

Answer 4

Existe un peligro al usar el <input type="text" pattern="/d*"> 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.

Answer 5

He descubierto que, al menos para campos tipo "código de acceso", hacer algo como <input type="tel" /> 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:

... y mi cliente estaba muy impresionado.

Answer 6

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 casilla de verificación al formulario y permitir al usuario alternar mi entrada (id = "inputSult") entre type = "number" y type = "text".

<input type="number" id="result"... >
<label><input id="cbAllowTextResults" type="checkbox" ...>Allow entry of text results.</label>

Luego conecté un controlador de clic a la casilla de verificación que alterna el tipo entre el texto y el número en función de si la casilla de verificación 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.

Answer 7

Para mí, la mejor solución fue:

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

<label for="ting">
<input id="ting" name="ting" type="number" pattern="[/d]*" />

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

<label for="ting">
<input id="ting" name="ting" type="number" pattern="[/d/.]*" step="0.01" />

Answer 8

Puede hacer <input type="text" pattern="/d*"> . Esto hará que aparezca el teclado numérico.

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

Answer 9

Puedes intentarlo así:

<input type="number" name="input">
<input type="submit" value="Next" formnovalidate="formnovalidate">

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

Answer 10

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" .