Catch only keypresses that change input?

by

In most browsers, you can use the HTML5 input event for text-type <input> elements:

$("#testbox").on("input", function() {
    alert("Value changed!");
});

This doesn’t work in IE < 9, but there is a workaround: the propertychange event.

$("#testbox").on("propertychange", function(e) {
    if (e.originalEvent.propertyName == "value") {
        alert("Value changed!");
    }
});

IE 9 supports both, so in that browser it’s better to prefer the standards-based input event. This conveniently fires first, so we can remove the handler for propertychange the first time input fires.

Putting it all together (jsFiddle):

var propertyChangeUnbound = false;
$("#testbox").on("propertychange", function(e) {
    if (e.originalEvent.propertyName == "value") {
        alert("Value changed!");
    }
});

$("#testbox").on("input", function() {
    if (!propertyChangeUnbound) {
        $("#testbox").unbind("propertychange");
        propertyChangeUnbound = true;
    }
    alert("Value changed!");
});

More Related Contents:

  1. Why is my javascript not working
  2. event.preventDefault() vs. return false
  3. jQuery click / toggle between two functions
  4. jQuery.parseJSON throws “Invalid JSON” error due to escaped single quote in JSON
  5. Force browser to download image files on click
  6. Event detect when css property changed using Jquery
  7. Using jQuery to replace one tag with another
  8. jQuery: load txt file and insert into div
  9. How to copy text from a div to clipboard
  10. Setting CSS value limits of the window scrolling animation
  11. Updating an input’s value without losing cursor position [duplicate]
  12. How to hide form code from view code/inspect element browser?
  13. Focus next input once reaching maxlength value
  14. capturing f5 keypress event in javascript using window.event.keyCode in window.onbeforeunload event is always 0 and not 116
  15. Preload mp3 file in queue to avoid any delay in playing the next file in queue
  16. How to know if JQuery has finished loading [duplicate]
  17. set option “selected” attribute from dynamic created option
  18. Change url when manually scrolled to an anchor?
  19. Why jQuery do this: jQuery.fn.init.prototype = jQuery.fn?
  20. jQuery .on(‘change’, function() {} not triggering for dynamically created inputs
  21. jQuery get html of container including the container itself
  22. Preloading images in HTML
  23. Get the content (text) of an URL after Javascript has run with PHP
  24. IE10/11 Ajax XHR error – SCRIPT7002: XMLHttpRequest: Network Error 0x2ef3
  25. Bind events on dynamic created elements inserted by AJAX (check box)
  26. Take User Back to Where They Scrolled to on previous page when clicking Browser Back Button
  27. jQuery addClass onClick
  28. Is My Page Being Loaded from the Browser Cache?
  29. In jQuery, is there any way to only bind a click once?
  30. Renaming object keys recursively

Leave a Comment