Javascript change event on input element fires on only losing focus

by 
(function () {
    var oldVal;

    $('#name').on('change textInput input', function () {
        var val = this.value;
        if (val !== oldVal) {
            oldVal = val;
            checkLength(val);
        }
    });
}());

This will catch change, keystrokes, paste, textInput, input (when available). And not fire more than necessary.

http://jsfiddle.net/katspaugh/xqeDj/

References:

textInput — a W3C DOM Level 3 event type. http://www.w3.org/TR/DOM-Level-3-Events/#events-textevents

A user agent must dispatch this event when one or more characters have
been entered. These characters may originate from a variety of
sources, e.g., characters resulting from a key being pressed or
released on a keyboard device, from the processing of an input method
editor, or resulting from a voice command. Where a “paste” operation
generates a simple sequence of characters, i.e., a text passage
without any structure or style information, this event type should be
generated as well.

input — an HTML5 event type.

Fired at controls when the user changes the value

Firefox, Chrome, IE9 and other modern browsers support it.

This event occurs immediately after modification, unlike the onchange event, which occurs when the element loses focus.

More Related Contents:

  1. event.preventDefault() vs. return false
  2. window.onload vs $(document).ready()
  3. Getting the ID of the element that fired an event
  4. jQuery.click() vs onClick
  5. Trigger a keypress/keydown/keyup event in JS/jQuery?
  6. Object.watch() for all browsers?
  7. window.onbeforeunload and window.onunload is not working in Firefox, Safari, Opera?
  8. Firing event on DOM attribute change
  9. Listening for variable changes in JavaScript
  10. How do you log all events fired by an element in jQuery?
  11. Jquery Event won’t fire after ajax call
  12. jQuery equivalent of JavaScript’s addEventListener method
  13. Way to know if user clicked Cancel on a Javascript onbeforeunload Dialog?
  14. Intercept all ajax calls?
  15. How do you detect the clearing of a “search” HTML5 input?
  16. How to check if any JavaScript event listeners/handlers attached to an element/document? [duplicate]
  17. How to delay calling of javascript function?
  18. Mozilla firefox not working with window.onbeforeunload
  19. Implementing jQuery’s “live” binder with native Javascript
  20. How to tell which row number is clicked in a table?
  21. full-screen browser window on load document
  22. Detecting an image 404 in Javascript
  23. Is it possible to catch browser’s File Open/Save dialog event using Javascript
  24. JavaScript/jQuery event listener on image load IE issues
  25. Fire oninput event with jQuery
  26. How do you force your Javascript event to run first, regardless of the order in which the events were added?
  27. How can I tell when a CSS background image has loaded? Is an event fired? [duplicate]
  28. Capturing result of window.onbeforeunload confirmation dialog
  29. How to execute code in a javascript append
  30. In web browsers, what’s the difference between onblur and onfocusout?

Leave a Comment