Fire deferred change event when text field input changes

Question

According to the jQuery API:

The change event is sent to an element when its value changes. This event is limited to <input> elements, <textarea> boxes and <select> elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.

Is there a way to make the text fields and text areas fire an event when the input text is changed and not only when they lose focus?

Answer 1

You're looking for the html5 input event:

$(…).on("input", function(e) {…});

However, it doesn't work in older browsers. You can hook on multiple events (most relevant keyup), and fire your listener on each of them. If you're doing rather heavy computations, you should filter to those events only that led to an actual change:

var val;
$(…).on("input change keyup keypress cut paste mouseup focus blur", function(e) {
    if (this.value !== val)
        val = this.value;
        …
    }
});

Answer 2

using keyup like this

http://api.jquery.com/keyup/

$( "#target" ).keyup(function() {
  alert( "Handler for .keyup() called." );
});