Limit input value with Javascript

Asked

Viewed 312 times

1

How do I limit the value in my input? I tried to use it didn’t work use min="1" and 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>

javascript html
  • 1

    To use min and max your field has to be like type="number"

  • Yes, this works if I type in the field, but if I use arrows to increase and decrease the value it does not limit even if use type="number"

  • It still doesn’t solve. see how my code https://answall.com/questions/451755/limitr-valor-do-input-com-javascript?noredirect=1#comment864086_451755

4 answers

3


What’s missing is actually simplifying the code to then visualize the problem.

First I memorized the code and then I took out the elephant ...document.getElementById("quant")... from within s a l the function. So I was able to visualize the problem that consisted of just limiting the contradomain.

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

Change the type of the html attribute to number:

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

0

Rewrite your Javascript code like this:

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;
            }
        }

Another interesting way to reuse the function and save time, is to use two other parameters to set the value maximum and minimum (where they are passed by HTML), and can use the same function as needed:

Change the Javascript code to:

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;
            }
        }

Change the HTML buttons to:

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

In this way it is possible to pass a personalized value to a given product, remembering that the second parameter is the maximum value and the third is the minimum.

0

You need to use the maxlength HTML, a basic example

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

Without the min and max. I quietly use the maxlength It’s always a sure thing. Good, but for your case involving button together, you could make a way that the buttons had a maximum click, using the property disabled. Maybe this post on Stackoverflow will help Limit click button

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.