CODEWITHSUNDEEP
javascripthtml
user4037564
user4037564

Reputation:

Restrict user to put value in range in html input (type = number)

How can I stop user from adding number greater than max value and smaller then min value in html input(type = number)

<input id="ageRange" type="number" min=20 max= 50 maxlength=2></input>

I tried one javascript code, but it makes change after we add the value then it changes the value. Is there any way that I can stop user to put value in range or just there is no flickering in the input cell while we change value programatically?

Upvotes: 10

Views: 25769

Answers (5)

Norbert Norbertson
Norbert Norbertson

Reputation: 2210

I ended up with this to prevent the user from entering letters or a number outside the range 1-10.

<input type="number" id="skill${player.id}" class="inpRatings" step="1" min="1" max="10">

document.getElementsByClassName("inpRatings")[0].oninput =
    function () {
     
      const val = this.value;

      if (parseInt(val)){
        if(val < 1 || val > 10){
          this.value = null;
        }
      } else {
        this.value = null;
      }
    };

The page contains a list of players with a rating. I wanted to only allow a rating between 1 and 10 and to prevent any non integers being entered, including "e" for exponential which is allowed in a number input.

So, the JS gets all the inputs with a class of "inpRatings" and attaches an 'oninput' event to them all. The even function parses the value entered. If it's outside 1-10 it gets set to null. If it's not parsed as an int it also gets set to null.

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201538

You would need handle input at a low level and perform your own checks. To prevent the user from typing value larger than the maximum, you could handle the keypress event and then check the input character and whether it would make the value too large:

<input id="ageRange" type="number" min=20 max= 50 maxlength=2>
<script>
document.getElementById('ageRange').onkeypress =
  function (e) {
    var ev = e || window.event;
    if(ev.charCode < 48 || ev.charCode > 57) {
      return false; // not a digit
    } else if(this.value * 10 + ev.charCode - 48 > this.max) {
       return false;
    } else {
       return true;
    }
  }
</script>

This does prevent the user from inserting a larger value by pasting.

To prevent the user from deleting characters so that the value becomes too small, you would need to handle the rubout key, which is more problematic due to keyboard differences. But it would be poor usability. Suppose the user typed 30, then realized he meant to type 40. A code that prevents changing the value to too small would prevent removing either digit!

Browsers are expected to have their own user interface for <input type=number>, and this is the reason for using it. The interface is not meant to prevent the user from typing too large values but to detect them and report them so that the user can correct them. Before trying to substantially modify this, consider the potential confusion. If you do add code that prevents out-of-ranfe values, browsers will not show diagnostic messages (e.g. “Number must be less than or equal to 50”), as they do by default if they support <input type=number>, so your JavaScript code should probably issue its own diagnostics.

Upvotes: 7

Ben Crowhurst
Ben Crowhurst

Reputation: 8481

Have a read of the input element documentation.

alternatively:

Have a read of HTML5 Constraint Validation

<input id="age" pattern="[0-9]" value="9" />
<script>
    document.getElementById('age').validity.patternMismatch;
</script>

And then take a read of Regex numeric range matching

Upvotes: 0

Masoud
Masoud

Reputation: 1351

Try this:

var max = 100;
$('input').keyup(function(){

var inputValue = $(this).val();
if(inputValue > max){
    alert('greater!');

    $(this).val('')
}

})

here is jsfiddle: http://jsfiddle.net/h07Lc0Ld/1/

Upvotes: 0

Perlica
Perlica

Reputation: 62

Set value to min...

<form>
<input id="ageRange" type="number" min="20" max="50" value="20"></input>
</form>

Upvotes: -2

Related Questions