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>

did you find a polyfill? if not, someone needs to write this.. — Lloyd, May 05 '16 at 18:02

score 9 · Answer 1 · answered Nov 03 '16 at 00:31

9

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 );

answered Nov 03 '16 at 00:31

Lux.Capacitor

336
3
12

3

I don't think textinput registers events for deletions – Michael Glass May 29 '18 at 16:37
3

I can confirm that `element.addEventListener('textinput', ...)` does not fire on backspace in IE11. Thanks @MichaelGlass! – Morgan Delaney May 31 '18 at 05:50

score 0 · Answer 2 · edited Jun 15 '18 at 21:03

0

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

edited Jun 15 '18 at 21:03

vsync

118,978
58
307
400

answered Feb 25 '14 at 07:17

Umair Hafeez

407
2
9

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

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>

Although this likely won't catch paste/cut/drag/drop actions — Hailwood, Jun 18 '18 at 03:19
@Hailwood - you can add those events, I just outlined the basic principle of hacking a working scenario for IE — vsync, Jun 18 '18 at 14:48

Maxim · Answer 4 · 2018-11-26T01:15:28.107

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);

IE input event for contenteditable?

4 Answers4

polyfill:

Linked