Telefone: teclado numérico para entrada de texto

178

Existe uma maneira de forçar o teclado numérico a aparecer no telefone para uma <input type="text">? Acabei de perceber que <input type="number">no HTML5 é para "números de ponto flutuante", então não é adequado para números de cartão de crédito, códigos postais etc.

Quero emular a funcionalidade do teclado numérico de <input type="number">, para entradas que usam valores numéricos diferentes de números de ponto flutuante. Existe, talvez, outro inputtipo apropriado que faça isso?

Tami
fonte
Ainda não há uma ótima resposta para códigos postais. Eu re-fez esta pergunta especificamente para códigos postais internacionais aqui: stackoverflow.com/questions/25425181/...
Ryan McGeary
Eu descobri uma maneira hackish para fazer isso ..sort de: stackoverflow.com/a/25599024/1922144
davidcondrey
A partir de meados de 2015, há uma maneira melhor de fazer isso: stackoverflow.com/a/31619311/806956
Aaron Gray

Respostas:

206

Você pode fazer <input type="text" pattern="\d*">. Isso fará com que o teclado numérico apareça.

Consulte aqui para obter mais detalhes: Guia de programação de texto, Web e edição para iOS

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

Seth Stone
fonte
23
Se você deseja apenas o teclado numérico, mas não deseja validar (como no Chrome), pode colocar o atributo novalidate no formulário. <form ... novalidate>
Brian
4
Eu descobri que \d*não funciona e [0-9]é necessário. Observe que isso funcionará com type='numeric'. Isso é sugerido com base na referência de documentos vinculados para o CEP.
Brett Ryan
11
Isso funciona desde que você precise apenas de valores numéricos. Números de ponto flutuante que requerem um '.' (ou ',' para algumas regiões) não pode ser inserido, pois o teclado não inclui esses caracteres.
DrHall 8/08/14
2
Se eu precisar usar. (ponto), como posso usá-lo? esse padrão mostra apenas [0-9]
15
<input type = "text" pattern = "\ d *"> não funciona no Android? Eu testei no ios e funcionou com sucesso, mas não funcionou no android. como posso resolvê-lo
kamal
158

Em meados de 2015, acredito que esta é a melhor solução:

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

Isso fornecerá o teclado numérico no Android e no iOS:

insira a descrição da imagem aqui

Ele também fornece o comportamento esperado da área de trabalho com os botões de seta para cima / para baixo e o aumento fácil da tecla de seta para cima / para baixo do teclado:

insira a descrição da imagem aqui

Experimente neste trecho de código:

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

Através da combinação de ambos type="number"e pattern="[0-9]*, obtemos uma solução que funciona em todos os lugares. Além disso, é compatível com o futuro inputmodeatributo proposto do HTML 5.1 .

Nota: O uso de um padrão acionará a validação nativa do formulário do navegador. Você pode desativar isso usando o novalidateatributo ou pode personalizar a mensagem de erro para uma falha na validação usando o titleatributo


Se você precisar digitar zeros à esquerda, vírgulas ou letras - por exemplo, códigos postais internacionais - verifique esta pequena variante .


Créditos e leituras adicionais:

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
fonte
1
A type="number" especificação HTML5 diz que Os seguintes atributos de conteúdo não devem ser especificados e não se aplicam ao elemento: ... inputmode
Tgr
2
@ Tre Ahh, boa captura. Parece que a especificação quer que as pessoas usem <input type="text" inputmode="numeric">e quer que os navegadores móveis examinem inputmodepara determinar se mostra um numpad ou teclado completo. Como nenhum navegador é compatível inputmode, não tenho certeza de como será implementado nos navegadores de desktop e móvel. Ex: Os navegadores de desktop permitem digitação de letras <input type="text" inputmode="numeric">? Se assim for, isso é um problema. <input type="number">evita isso, apenas permitindo números. Talvez tenhamos que esperar até que os navegadores comecem a implementá-lo e poderemos atualizar esta resposta.
Aaron Gray
2
O suporte type="number"é decente , mas pode exibir um botão rotativo que não faz muito sentido, por exemplo, para números de cartão de crédito.
Tgr
2
Ter type = "number" é uma chatice X (. Se a entrada for inválida, você não poderá obter o valor da entrada em JS, não poderá obter a posição do 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

Descobri que, pelo menos para campos do tipo "código de acesso", fazer algo como <input type="tel" />acaba produzindo o campo orientado a números mais autêntico e também tem o benefício de não ser auto-formatado . Por exemplo, em um aplicativo móvel que desenvolvi para a Hilton recentemente, acabei concordando com isso:

Tela do aplicativo da Web para iPhone com uma etiqueta de entrada com um tipo de TEL que produz um teclado numérico muito decente, em oposição ao número do tipo, que é auto-formatado e tem uma configuração de entrada um pouco menos intuitiva

... e meu cliente ficou muito impressionado.

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

Gabriel Ryan Nahmias
fonte
4
O problema para mim não era a formatação automática, mas a validação. A entrada do tipo numberforça regras estritas para o número em muitos navegadores. Se o usuário adicionar espaço (ou vírgula) para separar milhares, você não receberá QUALQUER valor da entrada. Sim, mesmo em JavaScript input.valueestará vazio. A entrada do tipo telnão é restrita a um formato específico, portanto o usuário ainda pode inserir qualquer coisa e a validação é um processo separado (para o desenvolvedor manipular).
Nux
Como eu posso usar números decimais em este teclado
Anto
11

Usar o botão type="email"ou type="url"fornecerá um teclado em alguns telefones, pelo menos, como o iPhone. Para números de telefone, você pode usar type="tel".

Niklas
fonte
9

Existe o perigo de usar o <input type="text" pattern="\d*">para abrir o teclado numérico. No firefox e chrome, a expressão regular contida no padrão faz com que o navegador valide a entrada para essa expressão. ocorrerão erros se não corresponder ao padrão ou for deixado em branco. Esteja ciente de ações não intencionais em outros navegadores.

Mike
fonte
6
A adição de um novalidateatributo à contenção form elementdeve lidar com os problemas de validação automática. Certifique-se de fazer alguma validação por conta própria.
9118 Justus Romijn
7
<input type="text" inputmode="numeric">

Com o Inputmode, você pode dar uma dica para o navegador.

Ralf de Kleine
fonte
4

Eu acho que type="number"é o melhor para a página da web semântica. Se você quiser apenas mudar o teclado, pode usar type="number"ou type="tel". Nos dois casos, o iPhone não restringe a entrada do usuário. O usuário ainda pode digitar (ou colar) qualquer caractere que desejar. A única alteração é o teclado mostrado ao usuário. Se você quiser alguma restrição além disso, precisará usar JavaScript.

Cat Chen
fonte
8
O problema que tenho é que type = "number" deve ser apenas para números de ponto flutuante - portanto, nenhum cartão de crédito, CEP ou uma série de outros números apenas seqüências de caracteres. Eu esperava que houvesse uma maneira semântica de codificá-la e também a exibição correta do teclado. O tipo apropriado, eu acho, seria input type = "text", mas o teclado errado será exibido. Se você pudesse me indicar algum javascript para fazer isso, isso resolveria os dois problemas.
Tami
2
type="number"é para flutuar. type="text"é para string. O que você realmente quer é inteiro. Acho float é mais próximo do número inteiro do que string. O que você acha?
Cat Chen
6
Uma coisa para ter cuidado com com type = "número" é que o Chrome, pelo menos, irá forçar a entrada para ser um número - que vai quebrar números de cartão de crédito celebrados com espaços (por exemplo)
John Carter
8
@therefromhere Ele também irá transformar zip códigos como 01920a 1920.
ceejayoz
que também irá estragar se o usuário tem um conjunto idioma diferente no seu navegador stackoverflow.com/questions/5345095/...
dalore
4

Para mim, a melhor solução foi:

Para números inteiros, que exibe o teclado 0-9 no android e iphone

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

Você também pode fazer isso para ocultar os giradores no firefox / chrome / safari, a maioria dos clientes acha feio

 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;
 }

E adicione novalidate = 'novalidate' ao seu elemento de formulário, se você estiver fazendo uma validação personalizada

Ps, no caso de você realmente querer números de ponto flutuante, o passo para qualquer precisão que você desejar adicionará '.' para android

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

Em 2018:

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

está funcionando para Android e iOS.

Eu testei no Android (^ 4.2) e iOS (11.3)

Shalika Akalanka
fonte
0

Você pode tentar assim:

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

Mas tenha cuidado: se sua entrada contiver algo diferente de um número, ela não será transmitida ao servidor.

alexwenzel
fonte
0

Não consegui encontrar um tipo que funcionasse melhor para mim em todas as situações: eu precisava usar como padrão a entrada numérica (entrada de "7.5", por exemplo), mas também em alguns momentos permitir o texto ("passar", por exemplo). Os usuários queriam um teclado numérico (entrada de 7,5, por exemplo), mas era necessária entrada ocasional de texto ("aprovação", por exemplo).

Em vez disso, o que fiz foi adicionar uma caixa de seleção ao formulário e permitir que o usuário alternasse minha entrada (id = "inputSresult") entre type = "number" e type = "text".

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

Em seguida, liguei um manipulador de cliques na caixa de seleção que alterna o tipo entre texto e número, com base no fato de a caixa de seleção acima estar 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");

    }
});

Isso funcionou bem para nós.

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

ele fornecerá a entrada de texto usando o teclado numérico

Chamin Thilakarathne
fonte