$(document).on("input",".SomeClass") Works On Chrome But Not IE

I have a span with contenteditable tag and I have a function used to detect input into it.. //TextArea //Function $(doc

Solution 1:

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.

Solution 2:

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

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

Solution 3:

This is a little complicated, 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!