Limit input box to 0-100

Question

I have an input box that takes values from 0-100. I want to prevent users from writing anything larger or smaller.

I've been using the jquery keyfilter plugin to limit the input of a field: http://code.google.com/p/jquery-keyfilter/

This plugin can limit the input to numerals, but not within a range. How do I prevent users from entering numbers that would exceed the range. Thanks.

Answer 1

Use plain Javascript like this:

<script>
  function handleChange(input) {
    if (input.value < 0) input.value = 0;
    if (input.value > 100) input.value = 100;
  }
</script>

Then declare the input box like this:

<input type="text" onchange="handleChange(this);" />

Because you have hooked this function to onchange(), it will work even if a user copy / pastes something into the input box.

Answer 2

HTML5 added several new input types, including number.

<form>
  Quantity (between 1 and 100):
  <input type="number" name="quantity" min="1" max="100">
</form>

New input types that are not supported by older web browsers, will behave as <input type="text">.

Runnable example from W3Schools.

Answer 3

If its just for number of characters not exceeding 20 (for example), then you can use

<input type="text" name="usrname" maxlength="20" />

If you need to handle some other cases in the input field, then a function would be a better option.

Answer 4

You just need to test the value of the field after each keystroke and before it is sent to the field (for example with a keypress event handler) - if the new keystroke would create a value too high then reject the key press.

For example - if the current value is 20 and the user tries to type a third number, you should reject the key press by returning false from the event handler. Basically the only third character that you should allow is "0" and only if the current field value is "10".

Answer 5

document.getElementById("test_id").onkeyup = function() {
  var input = parseInt(this.value);
  if (input < 0 || input > 100)
    console.log("Value should be between 0 - 100");
  return;
}

<input type="text" id="test_id" />

Answer 6

I'd suggest using the jQuery Validation plugin. Very flexible and extensible. To handle your range query the following. It will valied that any input in your form marked with the "percentage" class is present and falls in the given range.

$("#myform").validate({
  rules: {
    percentage: {
      required: true,
      range: [0, 100]
    }
  }
});

<input id="percent" name="percent" class="percentage" />

The reason that I suggest using the plugin is that it handles many validation situations out of the box, relieving you of the responsibility to write validation code for many scenarios -- you can expend your creative effort in better ways. It's also used by many people and so has the added advantage of being improved by a large community.

Update: Also, you may want to consider an alternative input mechanism, such as a slider (demo) that will constrain the data in a way that isn't subject to user error -- or at least not this particular type of error.

Answer 7

by jQuery to do this

<input type="number" name="quantity">

if number not between 0 - 100 then empty input field

<script>
    $("input[name='quantity']").change(function() {
      number = $("input[name='quantity']").val()
       if( number <= 0 || number >= 100 ) {
           $("input[name='quantity']").val("");
           alert("0 - 100");
         }
       });
</script>

Answer 8

You can use Math.min() and Math.max():

const val = Math.min(100, Math.max(0, val));

See documentation for more info:

• Math.min
• Math.max