Eu tenho um formulário de entrada de número de cartão de crédito que será usado por navegadores móveis e não móveis.

Quero sugerir que um teclado deve aparecer no celular e permitir espaços (opcionais), portanto, "4111 1234 1234 1234" ou "4111123412341234" devem ser aceitos.

Pelo que descobri, as opções são:

a)<input type="tel"/> - isso parece se comportar como eu quero (com os navegadores móveis atuais, pelo menos), mas está semanticamente errado.

b)<input type="text" pattern="[\d ]*"/> ou similar - oiPhone reconhece alguns padrões ([0-9]*, \d*) como trabalhar com o teclado, mas isso não funciona tão bem no Android. Também não tenho certeza se existem padrões que o iPhone vai dar um numpad para isso permitir espaços, embora eu não tenha um iPhone na mão para verificar agora.

c) Tente a detecção do navegador com Javascript e use (a) para celular e (b) para não-móvel. Cludgy, e nenhum benefício real sobre (a).

<input type="number"/> parece ser um não-iniciante desdeO Chrome, pelo menos, forçará essa entrada para um número, portanto, quebrando a entrada com espaços.

Existe uma maneira melhor de sugerir aos navegadores móveis que eles devem oferecer um numpad do que usartype="tel"?

Editar:

Talvez um-webkit-* propriedade que poderia ser aplicada a um campo de entrada de texto normal para sugerir que um numpad deve ser mostrado?