4

Boa Tarde, Estou fazendo um trabalho, do qual vou ter diversos formulários com um numero minimo e máximo e estou querendo criar uma função de verifica e evita a inserção de números fora da faixa pelo teclado, a minha função ficou desta forma

$(':input[type="number"]').on('keyup', function(event) {
  var id = this.id;
  var min = document.getElementById(id).getAttribute('min');
  var max = document.getElementById(id).getAttribute('max');

  verificaTypeNumber(id, min, max);
});

function verificaTypeNumber(idInput, minValue, maxValue) {
  var aux = document.getElementById(idInput).value;

  if (aux == null || aux < minValue) {
    document.getElementById(idInput).value = minValue;
  } else if (aux > maxValue) {
    document.getElementById(idInput).value = maxValue;
  }

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="Teste" min="10" max="999" value="10">

Ao digitar um valor abaixo da faixa (no exemplo menor que "10") a função funciona e entra dentro do if(), porem para um valor acima da faixa (acima de 999), ela não funciona e não entra dentro do else if()

1 Resposta 1

3

O .value de um input e os atributos min e max que estás a ler são strings. E por causa disso ele está a comparar texto e não numeros.

Repara na minha resposta que uso Number para converter texto (strings) em numeros e assim a tua lógica já funciona.

Mudei também o que é passado à função, assim em vêz de chamares document.getElementById(idInput) 5 vezes, não chamas nenhuma e usas o this que é o elemento que queres.

$(':input[type="number"]').on('keyup', function(event) {
  var min = Number(this.getAttribute('min'));
  var max = Number(this.getAttribute('max'));

  verificaTypeNumber(this, min, max);
});

function verificaTypeNumber(el, minValue, maxValue) {
  var aux = Number(el.value);

  if (aux == 0 || aux < minValue) {
    el.value = minValue;
  } else if (aux > maxValue) {
    el.value = maxValue;
  }

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="Teste" min="10" max="999" value="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 .