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

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 2

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 3

<input type="text" id="test_id" />
<script>
document.getElementById("test_id").onkeyup=function(){
    var input=parseInt(this.value);
    if(input<0 || input>100)
    alert("Value should be between 0 - 100");
    return;
}    
</script>

Answer 4

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.