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

184

¿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?

Tami
fuente
Todavía no hay una gran respuesta para los códigos postales. Volví a hacer esta pregunta específicamente para códigos postales internacionales aquí: stackoverflow.com/questions/25425181/…
Ryan McGeary
Descubrí una forma hackish de hacer esto ... tipo de: stackoverflow.com/a/25599024/1922144
davidcondrey
A mediados de 2015, hay una mejor manera de hacer esto: stackoverflow.com/a/31619311/806956
Aaron Gray

Respuestas:

211

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>

Seth Stone
fuente
23
Si solo desea el teclado numérico pero no desea validar (como en Chrome), puede poner el atributo novalidate en el formulario. <formulario ... novalidate>
Brian
4
He descubierto que \d*no funciona y [0-9]es obligatorio. Tenga en cuenta que esto funcionará con type='numeric'. Esto se sugiere en base a la referencia de documentos vinculados para el código postal.
Brett Ryan
11
Esto funciona siempre que necesite valores numéricos SOLAMENTE. Números de coma flotante que requieren un '.' (o ',' para algunas regiones) no se pueden ingresar ya que el teclado no incluye estos caracteres.
DrHall
2
Si necesito usar. (punto), ¿cómo puedo usarlo? este patrón muestra solo [0-9]
15
<input type = "text" pattern = "\ d *"> ¿no funciona en Android? Probé en iOS y trabajé con éxito, pero no funcionó en Android. ¿Cómo puedo resolverlo?
Kamal
166

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:

ingrese la descripción de la imagen aquí

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:

ingrese la descripción de la imagen aquí

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/

Aaron Gray
fuente
1
La type="number" especificación HTML5 dice que los siguientes atributos de contenido no deben especificarse y no se aplican al elemento: ... inputmode
Tgr
2
@Tgr Ahh, buena captura. Parece que la especificación quiere que la gente use <input type="text" inputmode="numeric">y quiere que los navegadores móviles miren inputmodepara determinar si muestra un teclado numérico o un teclado completo. Como no es compatible con navegadores inputmode, no estoy seguro de cómo se implementará en navegadores de escritorio frente a navegadores móviles. Ej .: ¿Los navegadores de escritorio permitirán escribir letras <input type="text" inputmode="numeric">? Si es así, eso es un problema. <input type="number">evita esto, solo permitiendo números. Quizás tendremos que esperar hasta que los navegadores comiencen a implementarlo y luego podamos actualizar esta respuesta.
Aaron Gray
2
El soporte para type="number"es decente , pero puede mostrar una ruleta que no tiene mucho sentido para, por ejemplo, números de tarjetas de crédito.
Tgr
2
Tener type = "number" es una molestia X (. Si la entrada no es válida, no podrá obtener el valor de la entrada en JS, no podrá obtener la posición del cursor, etc.
Nicu Surdu
2
This attribute applies when the value of the type attribute is text, search, tel, url, email, or password, otherwise it is ignored.
Michael Laffargue
61

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:

Pantalla de aplicación web de iPhone con una etiqueta de entrada que tiene un tipo de TEL que produce un teclado numérico muy decente en oposición al número de tipo que está formateado automáticamente y tiene una configuración de entrada algo menos intuitiva

... y mi cliente quedó muy impresionado.

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

Gabriel Ryan Nahmias
fuente
4
El problema para mí no fue el formato automático, sino la validación. La entrada de tipo numberfuerza reglas estrictas para el número en muchos navegadores. Si el usuario agrega espacio (o coma) para separar miles, no obtendrá NINGÚN valor de la entrada. Sí, incluso en JavaScript input.valueestará vacío. La entrada de tipo telno está restringida a un formato específico, por lo que el usuario aún puede ingresar cualquier cosa y la validación es un proceso separado (que debe manejar el desarrollador).
Nux
¿Cómo puedo usar números decimales en este teclado?
Anto
11

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

Niklas
fuente
10
<input type="text" inputmode="numeric">

Con Inputmode puede dar una pista al navegador.

Ralf de Kleine
fuente
9

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.

Miguel
fuente
6
Agregar un novalidateatributo en el contenedor form elementdebería solucionar los problemas de validación automática. Asegúrese de realizar una validación por su cuenta.
Justus Romijn
4

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.

Gato chen
fuente
8
El problema que tengo es que se supone que type = "number" solo es para números de punto flotante, por lo que no hay tarjetas de crédito, códigos postales o una gran cantidad de otros números, solo cadenas. Tenía la esperanza de que hubiera una forma semántica de codificarlo y de hacer la visualización correcta del teclado. El tipo apropiado, creo, sería tipo de entrada = "texto", pero luego aparece el teclado incorrecto. Si pudiera señalarme un javascript para hacerlo, eso resolvería ambos problemas.
Tami
2
type="number"es para flotar. type="text"es para cuerda. Lo que realmente quieres es un número entero. Creo que float está más cerca de un entero que de una cadena. ¿Qué piensas?
Cat Chen
6
Una cosa a tener en cuenta con type = "number" es que Chrome al menos forzará la entrada a ser un número, lo que romperá los números de tarjetas de crédito ingresados ​​con espacios (por ejemplo)
John Carter
8
@therefromhere También cambiará los códigos postales como 01920a 1920.
ceejayoz
también se estropeará si el usuario tiene un idioma diferente configurado en su navegador stackoverflow.com/questions/5345095/…
dalore
4

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" />
aqm
fuente
1

En 2018:

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

funciona tanto para Android como para iOS.

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

Shalika Akalanka
fuente
0

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.

alexwenzel
fuente
0

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.

Jeff Mergler
fuente
0
 <input type="text" inputmode="decimal">

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

Chamin Thilakarathne
fuente
-1

Puede utilizar el inputmodeatributo html:

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

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

Afaz Khatri
fuente
1
Esta respuesta ofrece la misma solución propuesta por @Ralf de Kleine
xKobalt