IE input event for contenteditable?

Question

I am wondering if there is a polyfill to support the contenteditable input event in IE11?

I am specifically talking about this event: http://jsfiddle.net/ch6yn/

Which fires whenever a change happens on a contenteditable div regardless of the source (e.g. copy/paste/drag/drop/type etc).

<div contenteditable="true" id="editor">Please type something in here</div>
<script>
document.getElementById("editor").addEventListener("input", function() {
    alert("input event fired");
}, false);
</script>

Answer 1

Ran into this today, this was how I solved it..

Solution: Change event name --> "textinput" works in IE 11 for event attachment - just be sure you let the other browsers use "input".

Example:

    //Check for IE ('Trident')
    var eventType = /Trident/.test( navigator.userAgent ) ? 'textinput' : 'input';

    //Attach your event
    this.refs.captionInput.addEventListener( eventType, this.handleChangeCaption );

Answer 2

I don't think there is a ready-made polyfill for this till now, but people have wrote their own solutions according to their needs. Maybe this could help you:

onChange event with contenteditable

Answer 3

As already discussed, the input event for contenteditable elements is not support on IE.
see compatibility chart.

But, we already know an event that does work on IE, and that's the keydown event listener, but obviously it fires on every key, and not only keys which add/remove characters, so there should be a validation mechanism in place. Also it is known that the keydown event doesn't update the value of the element (its textContent) when fired, but after a delay, so a settimeout should be used. Last, we must sniff the browser, to only fallback to this method for IE:

polyfill:

// https://stackoverflow.com/a/37199444/104380
var msie = window.document.documentMode;

var elm = document.querySelector('div');

///////////////////////
// bind the events
if( msie ) 
  elm.addEventListener("keydown", onKeydown);
else
  elm.addEventListener("input", onKeydown);

///////////////////////
// events' callbacks
function onKeydown(e){
  // keydown requires a delay for the input's value to actually change
  setTimeout(function(){
      onInput.call(this, e)
  })
}

function onInput(e){
  var value = e.target.textContent.trim();
  
  // vaildate an actual character was pressed and not a non-character key
  if( e.target.lastValue == value ) return;
  
  // save the value on the input state object
  e.target.lastValue = value;

  console.log(value);
}

[contenteditable]{ 
  border:1px solid silver; 
  padding:5px; 
  
}

<div contenteditable></div>

Answer 4

I think the easiest way to track changes in contenteditable element is to use MutationObserver.
It can track changes in subtree, so you can handle any typing. It works in IE11 and all modern browsers.
Observer will track all DOM changes. You will need to use your own way to skip some changes.

Small example:

// Node
var node = document.getElementById('my-id');

// Config
var config = { attributes: false, childList: true, subtree: true };

// Callback
var callback = function(records, observer) {
   console.log('Raise any events here or handle changes directly.');
};

// Start
var observer = new MutationObserver(callback);
observer.observe(node, config);