1

Como limitar o valor no meu input? Tentei usar não funcionou usar min="1" e max="3"

function process(quant){
               var value = parseInt(document.getElementById("quant").value);
               value+=quant;
               if(value < 1){
                 document.getElementById("quant").value = 1;
               }else{
               document.getElementById("quant").value = value;
               }
             }
  <div data-app="product.quantity" id="quantidade">
            <span id="span_erro_carrinho" class="blocoAlerta" style="display:none;">Selecione uma opção                   para variação do produto</span>
            <label>Quantidade:</label>
            <input type="button" id="plus" value='-' onclick="process(-1)" />
            <input id="quant" name="quant" class="text" min="1" max="3" size="1" type="text" value="1"  maxlength="5" oninput="checa(this)" />

            <input type="button" id="minus" value='+' min="1" max="3" onclick="process(1)">
          </div>

3
  • 1
    Pra usar o min e max seu campo tem que ser do tipo type="number" 14/05/2020 às 22:45
  • Sim, isso funcionar se eu digitar no campo, porem se eu usar as setas para aumentar e diminuir o valor ele não limite nem mesmo se usar type="number" 14/05/2020 às 22:50
  • Ainda não resolve. veja como esta meu codigo pt.stackoverflow.com/questions/451755/… 14/05/2020 às 23:34

4 Respostas 4

3

O que falta na verdade é simplificar o código para então visualizar o problema.

Primeiro endentei o código e depois tirei o elefante ...document.getElementById("quant")... de dentro da s̶a̶l̶a̶ função. Então pude visualizar o problema que consistia em apenas limitar o contradomínio.

let input = document.getElementById("quant");

function process(quant) {
  var value = parseInt(input.value);
  value += quant;
  if (value < input.min) return;
  if (value > input.max) return;
  input.value = value;
}
<label>Quantidade:</label>
<input type="button" id="plus" value='-' onclick="process(-1)" />
<input type="text" id="quant" name="quant" class="text" min="1" max="3" size="1" value="1" maxlength="5" readonly/>
<input type="button" id="minus" value='+' min="1" max="3" onclick="process(1)">
</div>

0

Reescreva seu código JavaScript assim:

function process(quant) {
            var value = parseInt(document.getElementById("quant").value);
            value+=quant;
            if(value <= 1){
                value = 1;
                document.getElementById("quant").value = 1;
            }
            else if (value >= 3) {
                value = 3;
                document.getElementById("quant").value = 3;
            }
            else {
                document.getElementById("quant").value = value;
            }
        }

Outra forma interessante de reutilizar a função e poupar tempo, é usar outros dois parâmetros para definir o valor máximo e mínimo (onde são passados pelo HTML), e poder utilizar a mesma função conforme a necessidade:

Altere o código JavaScript para:

function process(quant, max, min) {
            var value = parseInt(document.getElementById("quant").value);
            value+=quant;
            if(value <= min){
                value = min;
                document.getElementById("quant").value = min;
            }
            else if (value >= max) {
                value = max;
                document.getElementById("quant").value = max;
            }
            else {
                document.getElementById("quant").value = value;
            }
        }

Altere os botões no HTML para:

<input type="button" id="plus" value='-' onclick="process(-1, 10, 1)" />
<input type="button" id="minus" value='+' onclick="process(1, 10, 1)">

Desta forma é possível passar um valor personalizado para determinado produto, lembrando que o segundo parâmetro é o valor máximo e o terceiro é o valor mínimo.

0

Você precisa usar o maxlength do HTML, um exemplo básico

<input id="quant" name="quant" class="text" size="1" type="text" value="1"  maxlength="5" oninput="checa(this)" />

Sem os min e max. Eu uso tranquilamente o maxlength e sempre da certo. Bom, mas para o seu caso que envolve botão junto, daria pra fazer uma forma que os botões tivessem um click máximo, usando a propriedade disabled. Talvez este post no StackoverFlow ajude Limit click button

0

Altere o tipo do atributo do html para number:

<input type="number" min="1" max="10">

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