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 una <input type="text">? Me acabo de dar cuenta de que<input type="number"> en HTML5 es para "números de punto flotante", por lo que no es adecuado para números de tarjetas de crédito, códigos postales, etc.

Quiero emular la funcionalidad de teclado numérico de <input type="number">, para entradas que toman valores numéricos distintos de los números de punto flotante. ¿Existe, quizás, otro inputtipo apropiado que haga eso?

Tu puedes 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 edición, edición y texto para iOS

<form>
  <input type="text" pattern="\d*">
  <button type="submit">Submit</button>
</form>

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 brinda el comportamiento de escritorio esperado con los botones de flecha arriba / abajo y la tecla de flecha arriba / abajo amigable con el teclado incrementándose:

Pruébelo en este fragmento de código:

<form>
  <input type="number" pattern="[0-9]*" inputmode="numeric">
  <button type="submit">Submit</button>
</form>

Al combinar ambos type="number"y pattern="[0-9]*, obtenemos una solución que funciona en todas partes. Y es compatible con el futuro inputmodeatributo propuesto de HTML 5.1 .

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

Si necesita poder ingresar ceros, comas o letras a la izquierda, 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/

Descubrí que, al menos para campos similares a "códigos de acceso", hacer algo como <input type="tel" />termina produciendo el campo orientado a números más auténtico y también tiene la ventaja de no tener formato automático . Por ejemplo, en una aplicación móvil que desarrollé para Hilton recientemente, terminé eligiendo esto:

... y mi cliente quedó muy impresionado.

<form>
  <input type="tel" />
  <button type="submit">Submit</button>
</form>

El uso de type="email"o type="url"le dará un teclado al menos en algunos teléfonos, como el iPhone. Para números de teléfono, puede usar type="tel".

<input type="text" inputmode="numeric">

Con Inputmode puede dar una pista al navegador.

Existe el peligro de utilizar el <input type="text" pattern="\d*">para abrir el teclado numérico. En Firefox y Chrome, la expresión regular contenida en el 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 se deja en blanco. Tenga en cuenta las acciones no deseadas 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, el iPhone no restringe la entrada del usuario. El usuario aún puede escribir (o pegar) cualquier carácter que desee. El único cambio es el teclado que se muestra al usuario. Si desea alguna restricción más allá de esto, debe utilizar JavaScript.

Para mi la mejor solución fue:

Para números enteros, que muestra el teclado 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 spinners en firefox / chrome / 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 agregue novalidate = 'novalidate' a su elemento de formulario, si está haciendo una validación personalizada

Ps en caso de que realmente quisieras números de punto flotante después de todo, da un paso con la precisión que desees, agregará ' a android

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

En 2018:

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

funciona tanto para Android como para iOS.

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

Puedes probar así:

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

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

No pude encontrar un tipo que funcionara mejor para mí en todas las situaciones: necesitaba la entrada numérica predeterminada (entrada de "7.5" por ejemplo) pero también en ciertos momentos permitir texto ("pasar" 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 ("pasar" por ejemplo).

Más bien, lo que hice fue agregar una casilla de verificación al formulario y permitirle al usuario alternar mi entrada (id = "inputSresult") 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 texto y número en función de si la casilla de verificación anterior 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.

 <input type="text" inputmode="decimal">

le dará entrada de texto usando el teclado numérico

prueba esto:

$(document).ready(function() {
    $(document).find('input[type=number]').attr('type', 'tel');
});

consulte: https://answers.laserfiche.com/questions/88002/Use-number-field-input-type-with-Field-Mask

Puede utilizar el inputmodeatributo html:

<input type="text" inputmode="numeric" />

Para obtener más detalles, consulte el documento MDN en modo de entrada .