oninput in IE9 doesn't fire when we hit BACKSPACE / DEL / do CUT

Question

What\'s the cleanest solution we use to overcome the problem that IE9 doesn\'t fire the input event when we hit BACKSPACE / DEL / do CUT?

By cleanest I mean code

Answer 1

I developed an IE9 polyfill for the backspace/delete/cut.

(function (d) {
  if (navigator.userAgent.indexOf('MSIE 9') === -1) return;

  d.addEventListener('selectionchange', function() {
    var el = d.activeElement;

    if (el.tagName === 'TEXTAREA' || (el.tagName === 'INPUT' && el.type === 'text')) {
      var ev = d.createEvent('CustomEvent');
      ev.initCustomEvent('input', true, true, {});
      el.dispatchEvent(ev);
    }
  });
})(document);

For some reason, in IE9, when you delete inside a textfield, the selectionchange event is triggered.

So, the only thing you need to do is: check if the active element of the selection is an input, and then I tell the element to dispatch the input event, as it should do.

Put the code anywhere in your page, and all the deletion actions will now trigger the input event!

Answer 2

IE9 doesn't fire the oninput event when characters are deleted from a text field using the backspace key, the delete key, the cut command or the delete command from the context menu. You can workaround the backspace/delete key problem by tracking onkeyup. You can also workaround the cut command problem by tracking oncut. But the only way I've found to workaround the context delete command is to use the onselectionchange event. Fortunately if you use onselectionchange you won't have to track oncut or onkeyup.

Here's some example code based on this technique I've written about:

<input id="myInput" type="text">

<script>
  // Get the input and remember its last value:
  var myInput = document.getElementById("myInput"), 
      lastValue = myInput.value;

  // An oninput function to call:
  var onInput = function() {
    if (lastValue !== myInput.value) { // selectionchange fires more often than needed
      lastValue = myInput.value;
      console.log("New value: " + lastValue);
    }
  };

  // Called by focus/blur events:
  var onFocusChange = function(event) {
    if (event.type === "focus") {
      document.addEventListener("selectionchange", onInput, false);
    } else {
      document.removeEventListener("selectionchange", onInput, false);
    }
  };

  // Add events to listen for input in IE9:
  myInput.addEventListener("input", onInput, false);
  myInput.addEventListener("focus", onFocusChange, false);
  myInput.addEventListener("blur", onFocusChange, false);
</script>

Answer 3

I had the same problem. The oninput event fires for backspace, del, etc in Chrome and FF but not IE9.

However, that OnKeyUp does actually fire backspace, del etc in IE9 but not Chrome FF, so the opposite.

I added a specific IE javascript file named ieOverrides.js:

<!--[if IE 9]>
    <script type="text/javascript" src="js/ui/ieOverrides.js"></script>
<![endif]-->

Then in the js file I switched the event handlers:

$(document).ready(function(){
    $("#search").off('input');
    $("#search").on('keyup', function(){
        search(this.value);
    });
});

Hope that helps.

Answer 4

you could try html5Forms (formerly html5widgets)

Since I hate COBOL, I decided to update my html5Widgets library to:

1. Add support for oninput for browsers that don’t support it (e.g. IE7 and 8)
2. Force IE9 to fire a form’s oninput when the backspace and delete keys are pressed inside any of the input nodes.
3. Force IE9 to fire a form’s oninput when the cut event is fired on any of the input nodes.

here is a link to the commit that adds this support