jQuery input value

Question

We have some input elements on the page:

<input type="text" class="lovely-input" name="number" value="" />

User types a number he wants to see.

How to watch for this input value. with some options? They are:

1. If user types a digit more than 100, change the value of input (on fly, without page refresh) to 100.
2. If he types digit less than 1, turn value to 1.

Answer 1

The jquery validation plugin will handle your maximum and minimum value requirements.

In regard to changing input:

$("#number_input").change(function() {
  if($("#number_input").val() < 1) 
    $("#number_input").val(1);
});

Answer 2

Use the keyup event instead:

$(".lovely-input").keyup(function(e) {
    var $this = $(this);
    var val = $this.val();
    if (val > 100){
        e.preventDefault();
        $this.val(100);
    }
    else if (val < 1)
    {
        e.preventDefault();
        $this.val(1);
    }
});

Here's a working fiddle.