Percentage mask

Navigation
0

How can I make a percentage mask, where the user types a number in percent in an input-text, the number can be at most 100%, hence if for example the user types 30% in the first input, he can no longer enter more than 70% in the second input, then type 20% in the second, in the third you can not enter more than 50%. Also if possible, display the percentage symbol at the end of the number.

    
asked by anonymous 03.03.2018 / 00:28

3 answers

2

The logic works like this, considering that there are 3 users: If user A is adding value, he will have to add the existing value of B and C to see what's left over for him. If it is B, add A and C. And if it's C, add A and B.

Now if it's a single user with three input fields, we'll just use JAVASCRIPT.

It will not work in Internet Explorer because I used input of type number to change the MAX attribute of each field: 

function distribuirPercent(t){
   var myform = document.forms.porcentagem;
   var lmt;
   var n = t.name;
   /* Pré limitação por segurança */
   myform.campo_a.max = myform.campo_a.value;
   myform.campo_b.max = myform.campo_b.value;
   myform.campo_c.max = myform.campo_c.value;
   /* ---------------------------------------------*/

   /* Transformar campos em números para operações */
   var a = parseInt(myform.campo_a.value);
   var b = parseInt(myform.campo_b.value);
   var c = parseInt(myform.campo_c.value);
   /* ---------------------------------------------*/
   if(n == "campo_a"){
      lmt = b+c;
   }
   if(n == "campo_b"){
      lmt = a+c;
   }
   if(n == "campo_c"){
      lmt = a+b;
   }
   console.clear();
   console.log("Total dos outros 2: "+lmt);
   lmt = 100-lmt;
   console.log("Limite permitido: "+lmt);
   t.max = lmt;
}
input[type=number] {
    -webkit-appearance: textfield;
-moz-appearance: textfield;
    appearance: textfield;
    margin: 0;
    border: solid 0px #fff;
    width: 20px;
    text-align: right;
}
<form name="porcentagem">
<label><input type="number" name="campo_a" min="0" max="100" value="0" onfocus="distribuirPercent(this)" size="3" />%</label><br />
<label><input type="number" name="campo_b" min="0" max="100" value="0" onfocus="distribuirPercent(this)" size="3" />%</label><br />
<label><input type="number" name="campo_c" min="0" max="100" value="0" onfocus="distribuirPercent(this)" size="3" />%</label>
</form>
    
03.03.2018 / 02:06
0

% with% elements of type "range" lets the user specify a numeric value that must not be less than a certain value, and not more than a specified maximum value. The precise value, however, is not considered important. This is usually represented by a slider or the same type of "number" input control. Since this type of element is imprecise, it should not be used unless the exact value of the control is not important. 

<input type="range">

Read more

    
03.03.2018 / 00:49
0

One way to do this is to add everything as you type. If the sum exceeds 100, the typed field is cleared so you can enter a valid value: 

document.addEventListener("DOMContentLoaded", function(){
   let els = document.querySelectorAll(".inps"),
   calc = (i) => {
      let ttl = 0,
      thisval = i.target.value;

      for(let x=0; x<els.length; x++){
         ttl += Number(els[x].value.replace(",",".").replace("%",""));
         if(ttl > 100){
            i.target.value = '';
         }
      }
      
      if(thisval.indexOf("%") == -1) i.target.value += "%";

      i.target.selectionStart = i.target.selectionEnd = thisval.replace("%","").length;
   }

   for(let x=0; x<els.length; x++){
      els[x].addEventListener("input", calc);
   }
});
<input maxlength="3" type="text" class="inps">
<br>
<input maxlength="3" type="text" class="inps">
<br>
<input maxlength="3" type="text" class="inps">
    
03.03.2018 / 02:45
Image inserted in html does not want to appear Get the name of the connected wifi in C #