Telefone: teclado numérico para entrada de texto

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?

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>

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:

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:

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/

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:

... e meu cliente ficou muito impressionado.

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

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

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.

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

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

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.

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

Em 2018:

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

está funcionando para Android e iOS.

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

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.

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.

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

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

tente isto:

$(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