0

Gostaria de saber como limitar num input o número máximo digitado. Por exemplo: quero que o maior número que possa ser digitado seja 42, ou seja, se o usuário tentar digitar 43: ou apareceria apenas o quatro, ou, ao digitar o 4, exibiria o 2, pois o limite é 42, e o mínimo é 1.

O resultado não precisa ser necessariamente este que falei, só preciso que ela não consiga digitar o número 43 em diante. Se possível que ela não consiga nem usando CTRL + V kkk, mas qualquer progresso já me ajuda, segue o código que estou utilizando no momento com o mesmo exemplo, mas não está funcionando.

<input type="number" min="1" max="42">
1
  • Seu campo está em um formulário? Dentro de um <form>. Commented 16/03/2020 às 18:06

2 Respostas 2

2

Esse funcionalidade de digitar o 4 aparecer o 2 pode ser dispensável pois o usuário pode ter a intenção de digitar 41 e isso irá atrapalhar em vez de ajudar.

Mas você pode alterar o valor do campo para o mínimo caso seja digitado um valor menor que o min, ou para o valor máximo se tentar entrar um valor maior que o max.

Você pode usar o evento oninput e chamar uma função passando o elemento como parâmetro com this. O oninput detecta qualquer alteração no campo, mesmo colando.

Seria interessante também já iniciar o campo com o valor mínimo colocando o atributo value="1":

function checa(e){
   const mi = +e.min;
   const ma = +e.max;
   const va = e.value;
   if(va < mi){
      e.value = mi;
   }else if(va > ma){
      e.value = ma;
   }
}
<input oninput="checa(this)" value="1" type="number" min="1" max="43">

1
  • Obrigado Sam! Era dessa forma que eu queria! Eu já tinha encontrado uma função, mas como tava dentro de uma tabela estava tendo uns problemas, mas a sua funcionou exatamente à outra função, mas sem problemas. Abraço. Commented 18/03/2020 às 15:31
0

E se o valor máximo for 10, e eu precisar digitar, por exemplo: o número 6? não conseguirei.

function checa(e){
   const mi = +e.min;
   const ma = +e.max;
   const va = e.value;
   if(va < mi){
      e.value = mi;
   }else if(va > ma){
      e.value = ma;
   }
}
<input oninput="checa(this)" value="1" type="number" min="1" max="10">

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 .