[jquery] jQuery 'input' event

I've never heard of an event in jQuery called input till I saw this jsfiddle.

Do you know why it's working? Is it an alias for keyup or something?

$(document).on('input', 'input:text', function() {});

jQuery has the following signature for the .on() method: .on( events [, selector ] [, data ], handler )

Events could be anyone of the ones listed on this reference:

https://developer.mozilla.org/en-US/docs/Web/Events

Though, they are not all supported by every browser.

Mozilla states the following about the input event:

The DOM input event is fired synchronously when the value of an or element is changed. Additionally, it fires on contenteditable editors when its contents are changed.

As claustrofob said, oninput is supported for IE9+.

However, "The oninput event is buggy in Internet Explorer 9. It is not fired when characters are deleted from a text field through the user interface only when characters are inserted. Although the onpropertychange event is supported in Internet Explorer 9, but similarly to the oninput event, it is also buggy, it is not fired on deletion.

Since characters can be deleted in several ways (Backspace and Delete keys, CTRL + X, Cut and Delete command in context menu), there is no good solution to detect all changes. If characters are deleted by the Delete command of the context menu, the modification cannot be detected in JavaScript in Internet Explorer 9."

I have good results binding to both input and keyup (and keydown, if you want it to fire in IE while holding down the Backspace key).

$("input#myId").bind('keyup', function (e) {    
    // Do Stuff
});

working in both IE and chrome

Using jQuery, the following are identical in effect:

$('a').click(function(){ doSomething(); });
$('a').on('click', function(){ doSomething(); });

With the input event, however, only the second pattern seems to work in the browsers I've tested.

Thus, you'd expect this to work, but it DOES NOT (at least currently):

$(':text').input(function(){ doSomething(); });

Again, if you wanted to leverage event delegation (e.g. to set up the event on the #container before your input.text is added to the DOM), this should come to mind:

$('#container').on('input', ':text', function(){ doSomething(); });

Sadly, again, it DOES NOT work currently!

Only this pattern works:

$(':text').on('input', function(){ doSomething(); });

EDITED WITH MORE CURRENT INFORMATION

I can certainly confirm that this pattern:

$('#container').on('input', ':text', function(){ doSomething(); });

NOW WORKS also, in all 'standard' browsers.

I think 'input' simply works here the same way 'oninput' does in the DOM Level O Event Model.

Incidentally:

Just as silkfire commented it, I too googled for 'jQuery input event'. Thus I was led to here and astounded to learn that 'input' is an acceptable parameter to jquery's bind() command. In jQuery in Action (p. 102, 2008 ed.) 'input' is not mentionned as a possible event (against 20 others, from 'blur' to 'unload'). It is true that, on p. 92, the contrary could be surmised from rereading (i.e. from a reference to different string identifiers between Level 0 and Level 2 models). That is quite misleading.

Be Careful while using INPUT. This event fires on focus and on blur in IE 11. But it is triggered on change in other browsers.

https://connect.microsoft.com/IE/feedback/details/810538/ie-11-fires-input-event-on-focus

oninput event is very useful to track input fields changes.

However it is not supported in IE version < 9. But older IE versions has its own proprietary event onpropertychange that does the same as oninput.

So you can use it this way:

$(':input').on('input propertychange');

To have a full crossbrowser support.

Since the propertychange can be triggered for ANY property change, for example, the disabled property is changed, then you want to do include this:

$(':input').on('propertychange input', function (e) {
    var valueChanged = false;

    if (e.type=='propertychange') {
        valueChanged = e.originalEvent.propertyName=='value';
    } else {
        valueChanged = true;
    }
    if (valueChanged) {
        /* Code goes here */
    }
});