contenteditable=false inside contenteditable=true block is still editable in IE8

Question

I have the following HTML intending to make sure that the inner span isn\'t editable. This works in other browsers but not IE8.

Answer 1

I was stuck with the same problem today and after trying for a while figured a solution that works for me on IE. Add a click event listener to the child contenteditable element. In the event handler do as below

 document.querySelector('.simulated-icon').addEventListener('click', function(evt){
    evt.stopPropogation;
    evt.preventDefault;
    return false;
 });
 
 

Icon text

As you can see here returning false on the click event listener for the child content editable tells IE to not allow the edit. This works if there is a click event on the parent node and we check if the target child node is clicked in the event listener. Good luck.