how do i add a number limit in an input field?-CodePudding

How can i have a number limit? im trying to make it so that you can only type the number 1-100 in "app-benutzer" and 1-15 in "backend-benutzer" also is there a way to display these numbers in the input field without typing them so it would show the user that you can only type the number from 1-15.

html:
 <body>
    App-Benutzer: <input type="number" min="1" max="100" class='appuser'></input><br>
    Backendbenutzer: <input type="number" min="1" max="15" class='backenduser'></input><br>
    <button class='calcit'>Berechnen</button><br>
    <span class='summe'>0.00</span><br>
    <script src="./app.js"></script>
  </body>
js:
const btncalc = document.querySelector('.calcit');
const summetext = document.querySelector('.summe');


btncalc.addEventListener('click', function(){
    var backendanzahl= document.getElementsByClassName("backenduser")[0].value;

    var appanzahl= document.getElementsByClassName("appuser")[0].value;
    var mytext="Anzahl der Summe:"   ( backendanzahl * 35    appanzahl * 7.5) ;
    summetext.textContent = mytext;
});

CodePudding user response：

You can achieve this only by using HTML.

This way, you can't really write anything more than what you specify in your terms.

Clarification:

Placeholder is the attribute that you use to put some text inside of your input field, but that text will disappear as soon as you click on your element.

oninput is the Event that occurs every time that value of your input element has changed. So basically, each time you write 1 number/letter/whatever, oninput event will trigger.

That's where we put our condition.

this.value - represents what we write inside of our input element.

our value (this.value) = if (this.value > 100) (? represents something like return) return 100 ( (:) is like else) else return this.value

this.value = this.value > 100 ? 100 : Math.abs(this.value)

is equivalent to

   if(this.value > 100) //this.value is what we write inside of the field
      return 100;
   else
      return this.value;

 <body>
    App-Benutzer: <input type="number" min="1" max="100" oninput="this.value = this.value > 100 ? 100 : Math.abs(this.value)"  class='appuser' placeholder='1-100'></input><br>
    Backendbenutzer: <input type="number" min="1" max="15" oninput="this.value = this.value > 15 ? 15 : Math.abs(this.value)" class='backenduser' placeholder='1-15'></input><br>
    <button class='calcit'>Berechnen</button><br>
    <span class='summe'>0.00</span><br>
    <script src="./app.js"></script>
  </body>

CodePudding user response：

You can use placeholder attribute of input field to put any text you want. This text will disapear once the user starts to edit the field. In you case you may may sat a placeholder to visualise "1-15".

<body>
    App-Benutzer: <input type="number" min="1" max="100" class='appuser' placeholder="Input a value from 1 to 100"></input><br>
    Backendbenutzer: <input type="number" min="1" max="15" class='backenduser' placeholder="Input a value from 1 to 15"></input><br>
    <button class='calcit'>Berechnen</button><br>
    <span class='summe'>0.00</span><br>
    <script src="./app.js"></script>
</body>

CodePudding user response：

Adidtionaly to the other answer you can add a maxlength. This way you could limit the length of the input, in your case "2" or "3". To display the numbers you can specifiy a placeholder like this:

 <input type="number" maxlength="3" class='appuser' placeholder="1-100"></input>

If you want to limit the possible values and don't deal with the errors you could just use a dropdown or something alike.