Entrada para dispositivos móviles de una cadena de dígitos + espacios (número de tarjeta de crédito)

Question

Tengo un formulario de entrada de número de tarjeta de crédito que utilizarán los navegadores móviles y no móviles.

Quiero indicar que debe aparecer un teclado en el móvil, y para permitir espacios (opcionales), por lo que "4111 1234 1234 1234" o "4111123412341234" deben aceptarse.

De lo que he encontrado, las opciones son:

a) <input type="tel"/> - esto parece comportarse como quiero (con navegadores móviles actuales, al menos), pero es semánticamente mal.

b) <input type="text" pattern="[\d ]*"/> o similar - el iPhone recognises some patterns ([0-9]*, \d*) como el trabajo con el teclado, pero esto no funciona así en Android. Además, no estoy seguro de que existan patrones que el iPhone otorgue un teclado numérico que permita espacios, aunque no tengo un iPhone a mano para verificar en este momento.

c) Intente detectar el navegador con Javascript y use (a) para dispositivos móviles y (b) para dispositivos no móviles. Cludgy, y ningún beneficio real sobre (a).

<input type="number"/> parece no ser un iniciador desde Chrome at least will force such input to a number, por lo tanto, interrumpir la entrada con espacios.

¿Hay una mejor manera de insinuar a los navegadores móviles que deberían ofrecer un teclado numérico que usando type="tel"?

Editar:

Tal vez una propiedad -webkit-* que podría ser aplicado a un campo de entrada de texto normal a insinuar que un teclado numérico se debe mostrar?

Answer 1

Por lo que sé, no hay diseño de teclado en el iPhone que permita tanto números como espacio sin al menos cambiar automáticamente de números a caracteres. Escribir un número con espacios intermedios requerirá que el usuario vuelva a cambiar varias veces al diseño de teclado de los números después de cada espacio.

Si ofreciera campos de entrada individuales para los cuatro bloques de números y utilizara algunos javascript para mover automáticamente el cursor de un campo de entrada al siguiente una vez que se haya escrito el cuarto número, podría usar <input type="number"/> más Los usuarios de iPhone cambian entre los diseños de teclado.

Answer 2

El marcado semánticamente correcta para un campo de texto que aún pueden contener espacios en blanco y otros caracteres especiales es <input type="text" inputmode="numeric"/> sin embargo por lo que yo soy consciente mientras inputmode es recomendado por WhatWG todavía no es compatible con cualquier navegador. Su intención es presentar al usuario un teclado numérico en un dispositivo que lo tiene pero aún se comporta como una entrada de texto.

Mi sugerencia sería hacer polyfill inputmode con JS y cambiar a type="tel" en dispositivos táctiles (que es la mejor solución disponible actualmente). Tenga en cuenta que los dispositivos tienen diferentes teclados 'tel' y 'number', iOS 'tel' no permite espacios, mientras que Chrome mobile permite todo tipo de caracteres especiales. ¿Quién sabe qué teclados personalizados de Android hacen?

Si no desea construir su propio relleno, puede implementar Webshim que ahora rellena inputmode a partir del release 1.14.0.Esto también tiene tiene la característica interesante de mantener el IOS 'número' teclado invocado mediante el establecimiento de pattern="[0-9]*" si lo desea (nota: esto no es el mismo teclado que se obtiene al establecer type="number")

Aquí es el análisis que hice en input type behavior across browsers y mi debate con @aFarkas (el autor de Webshim) en el modo de entrada polyfilling.