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 stinks not.

Olivette

doesn't fire what? a key event? that's probably on purpose to stop people breaking the back functionality. Is there any reason you aren't using a textarea or contentEditable? – Triny

@spliff doesn't fire the oninput event.. as in the title – Olivette

It depends what you actually want to do when the input event fires. Is it essential, for example, that the input/textarea's value has already been updated? – Terrie

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!

Incunabulum

Nice, but there is a situation with IE9's selectionchange where it doesn't fire on the backspace press. Like I would be typing then delete one character, add one character, delete again. That last deletion won't fire the event. Had to listen to the keyup as well. – Dome

I think the newest version of the polyfill that is hosted on Github (and I updated here in the answer) is now working. Could you give it a try, please, @tfE? – Incunabulum

jsfiddle.net/evgpt971 Tested on IE9 virtual machine. When I type and then delete one character, add one character, delete again. That last deletion not captured. As far as I can tell It's not the polyfill but the IE9's behaviour of "selectionchange" event. – Dome

@Dome thanks! I made another change and tested on IE9 this behavior, it seems to be working well :) – Incunabulum

Answer 2

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.

Mint

Answer 3

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>

Carlina

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

Crosswalk

i mean yes i've read that blogpost but how did he achieved steps 2 and 3? did he set a onkeypress event handler, check if the keycode is the backspace and oncut event handler? yet wouldn't that occur even if the browser is not IE (since we don't want to do any messing around when the browser inherently already supports this feature)? – Olivette

@Name, if you don't want to use the whole html5widgets, why not look at the repository on github and see how it's done? – Crosswalk

@Name, I added a link to the diff to my answer – Crosswalk

@Name: That's not a great workaround: it uses the keyup event, which means you won't get separate input events for autorepeated delete keypresses. – Terrie

@DanielXMoore, the project was renamed. I've updated the link – Crosswalk