javascript\jquery: Event that fires when textbox changes

Question

I'm looking for a jquery/simple javascript (not some other library) solution that set an event to a textbox that will fire when the textbox being changed? (not after blur)
I need it to fire no matter how it was changed (keyboard char key/tab/enter or mouse paste) And I need it to be fired one time only.

Answer 1

Unfortunately, there isn't one. There will be some day, when all browsers support the textinput event and/or the HTML5 input event, but currently not all do, and those that do have various bugs. You can use a combination of events, but you have to handle responding to each change only once yourself, and there's always the possibility of failing to cover some browser somewhere.

So if you absolutely, positively have to do this, you have to poll the value property every N milliseconds. (Choose the largest number you're happy with, to avoid making the browser work too hard, and make sure the code in the timer function is as tight and quick as possible — e.g., don't re-look-up the element each time, look it up once and keep a reference to it.)

Answer 2

I used T.J. Crowders's answer and came up with this code:

(function() {
setInterval(function() {
    var validated = false;
    if ($('#mytextinput').val() !== '' && validated === false) {
        // perform validation or whatever you need

        validated = true;
    }
    else {
        validated = false;
    }
}, 500);
})();

Answer 3

You can bind the keyup event.

$("textarea").bind("keyup", function() {
    // Fires after the user has typed
});

See: http://jsfiddle.net/AWUbu/1/

Answer 4

var obj = document.getElementById("field");
var func= function(){
    alert('hi');
}

obj.onkeypress= func;
obj.onclick = func;
obj.on... = func;

Answer 5

Aside from the bind method outlined in another answer, you can also do this:

$("#txtTest").keyup(function(){
    alert($(this).val());
});

Answer 6

You can use jQuery keydown or keyup.

var target = jQuery('#id');
target.keydown( function () { alert('hi'); } );

Now, since you want to be called only once, all you have to do is to unbind right after it's called:

target.keydown( function () { alert('hi'); target.unbind('keydown'); } );