CODEWITHSUNDEEP
javascripthtml
programmnoob
programmnoob

Reputation: 71

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

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

Upvotes: 1

Views: 281

Answers (2)

aca
aca

Reputation: 1121

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>

Upvotes: 2

Kostyuk Rostyslav
Kostyuk Rostyslav

Reputation: 417

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>

Upvotes: 0

Related Questions