6

Quero colocar um input no html e quero limitar apenas a 2 numeros.

<input type="text" name="Dia" maxlength="2" size="2" >

Experimentei este mas continua a aparecer letras.

3 Respostas 3

11

Para limitar o input a números basta mudar o type de text para number:

<form action="#">
  <input type="number" name="Dia" min="1" max="31">
  <input type="submit">
</form>

Ainda se quiser limitar de 1 a 31 (imaginando que seja o número de dias do mês) pode fazê-lo com mim e max.

Nota: Este tipo number não funciona no IE9 nem versões anteriores.

No caso de precisar que funcione em IE9 ou anterior pode usar JavaScript:

<form action="#">
  <input type="text" maxlength="2" onkeypress='return event.charCode >= 48 && event.charCode <= 57'></input>
  <input type="submit">
</form>

Fonte do exemplo com onkeypress.

3
  • Trocando o type para number não resolve, pois ainda continua aceitando Letras. Alias ele tornará o input em um "seletor" de numeros, mas não impedirá de o usuário digitar números.
    – MeuChapeu
    Commented 27/01/2015 às 10:41
  • Não aceita letras, olha testa @MeuChapeu. Dá submit a ver se aceita.
    – Jorge B.
    Commented 27/01/2015 às 10:42
  • Correto, ao clicar no submit ele irá avisar que aceita somente números, mas não impedirá que o usuário digite as letras. Ao contrário do evento onkeypress que só permite digitar números.
    – MeuChapeu
    Commented 27/01/2015 às 10:49
2

Você pode usar o evento onkeypress:

<input type="text" maxlength="2" onkeypress="if (!isNaN(String.fromCharCode(window.event.keyCode))) return true; else return false;">

Toda vez que uma tecla for presiona dentro do input o evento será ativado, e verificara se a tecla presiona é ou não um número, caso seja letras retornara false, se for número retornará true e irá aparecer no input.

Veja como ficou no Fiddle.

OBS: O evento onkeypress não está funcionando no Firefox

1
  • O onkeypress funciona sim no Firefox, o que acontece é que o window.event não existe. Uma solução com o mesmo resultado, funcionando também no Firefox é essa: return !isNaN(event.key);. Mas essa abordagem tem um problema, pois impede o usuário de interagir no input usando as setas, backspace, delete, etc...
    – Oeslei
    Commented 29/01/2015 às 11:46
-3

peguei a sugestao do de cima e fiz assim tbm

<input id="phone" type="tel" name="phone" placeholder="(xx) xxxxx - xxxx" maxlength="12" onkeypress="if (!isNaN(String.fromCharCode(window.event.keyCode))) return true; else return false;">
1
  • Sua resposta pode ser melhorada adicionando informações fundamentais. Basta editar para adicionar mais detalhes, como citações ou documentação para que outras pessoas possam confirmar que sua resposta está correta. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    Commented 30/05/2022 às 0:40

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .