I have a span with contenteditable tag and I have a function used to detect input into it..

//TextArea
<span class="SomeClass" contenteditable></span>

//Function
$(document).on("input", ".SomeClass", function () {
    console.log("input entered");
});

This works for me on Chrome but not on the IE 11 or below. I can't seem to find any mention of it online and was wondering if anyone could give me information on how to get this working or a better approach.

Thanks

I have a span with contenteditable tag and I have a function used to detect input into it..

//TextArea
<span class="SomeClass" contenteditable></span>

//Function
$(document).on("input", ".SomeClass", function () {
    console.log("input entered");
});

This works for me on Chrome but not on the IE 11 or below. I can't seem to find any mention of it online and was wondering if anyone could give me information on how to get this working or a better approach.

Thanks

• javascript
• jquery
• html
• internet-explorer
• google-chrome

• would you post some markup for it, my suggestion is to delegate to the static parent of this element not document. – Jai Commented May 29, 2014 at 10:05
• I would go to the static parent, but for some reason that does not work with dynamically generated html. this seems to be the only way I can connect with the elements. – RichardMc Commented May 29, 2014 at 10:20
• JamesDonnely has answered it. Its a reported bug, so you can't do anything about it but you can do a workaround to it. – Jai Commented May 29, 2014 at 10:22

3 Answers 3

This is a reported bug (#794285) in IE10 and IE11: contenteditable elements do not fire the input event.

A workaround be to handle different event types alongside input, such as keypress, paste and change:

$(document).on("input keypress paste change", ".SomeClass", function () {
    console.log("input entered");
});

JSFiddle demo.

Maybe try a more widely supported event like keydown or keypress instead of input?

$(document).on("keypress", ".SomeClass", function () {
    console.log("input entered");
});

This is a little plicated, it might use some refactoring, but here you go :

var initialState;
$( document ).ready(function() {
    initialState = document.getElementById("span").innerHTML;
});

$(document).keydown( function () {
    var currentState =  document.getElementById("span").innerHTML;
   if( initialState != currentState) {

 console.log("Content changed!");
 }
 });

Basically, you "catch" the span when the document is loaded and you add an event listener each time the user presses a key.

Good luck!