Percentage mask

Question

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

Answer 1

The logic works like this, taking into account that there are 3 users: If user A is adding value, it will have to add the existing value of B and C to see what is left for it. If it’s B, it’ll add up A and C. And if it’s C, it’ll add A and B.

Now if you are a single user with three input fields we will only use JAVASCRIPT.

It just won’t work on Internet Explorer why I used input of the kind number to change the attribute MAX real 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>

Answer 2

<input> "range" type elements lets the user specify a numeric value that must not be less than a given 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. As this type of element is inaccurate, it should not be used unless the exact value of the control is not important.

<input type="range">

Read more

Answer 3

One way to do this is by adding everything up as you type. If the sum exceeds 100, the entered field is cleaned so that a valid value can be entered:

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