4

Meu objetivo num post anterior era colocar um valor máximo e mínimo em um campo de texto, um usuário solucionou ele quase perfeitamente. Vamos utilizar como exemplo no máximo o número 37:

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="37">

Porém, caso o número máximo for por exemplo 10, ele não conseguirá apagar o número 1 para conseguir digitar por exemplo, um 7. Mas o número mínimo tem que ser 1, alguém saberia como ampliar essa solução?

Segue o link do post antigo: Limitar número num input

1
  • Como ... Não entendi?
    – novic
    Commented 18/03/2020 às 23:16

1 Resposta 1

2

No cenário do numero máximo ser 10, você pode alterar a função checa para permitir que o campo fique vazio, permitindo assim que o valor mínimo seja apagado e o valor 7 seja inserido:

function checa(e){
   const mi = +e.min;
   const ma = +e.max;
   const va = e.value;

   if(va.length) {
      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">


Mas isso pode gerar um problema pra você, caso esse campo seja obrigatório!

Se o campo for obrigatório e estiver dentro de um form, você pode utilizar do atributo required no seu input:

<form>
  <input type="number" min="1" max="10" required>
  <input type="submit">
</form>

Veja que se você deixar o campo vazio, o submit não permite o envio.


Se seu campo não está dentro de um formulário e você precisa que ele tenha um valor, você pode implementar o evento onblur para que ao sair do campo, caso o mesmo esteja vazio, seja inserido um valor, podendo ser o valor mínimo:

function checa(e){
    const mi = +e.min;
    const ma = +e.max;
    const va = e.value;

    if (va.length) {
        if(va < mi){
            e.value = mi;
        }else if(va > ma){
            e.value = ma;
        }
    }
}

function valorMinimo(e) {
    if (!e.value.length) {
        e.value = e.min;
    }
}
<input oninput="checa(this)" onblur="valorMinimo(this)" value="1" type="number" min="1" max="10">

2
  • 1
    Se seu campo não está dentro de um formulário, ele está semanticamente incorreto, coloque dentro de um formulário. Nem faz sentido ter um input fora de um form
    – Costamilam
    Commented 19/03/2020 às 2:47
  • Funcionou aqui amigo. Ele está dentro de um formulário sim. Abraço! Commented 19/03/2020 às 18:54

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 .