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

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

<div contenteditable="true">
  Luke, I am your father.
  <span contenteditable="false">I'm your son?! Ewww!</span>
  Don't speak back to me!
</div>

Here's a JSFiddle to illustrate t开发者_开发百科he point (use IE8 to test it): http://jsfiddle.net/haxhia/uUKPA/3/ .

How do I make sure that IE8 treats this properly as well?

Okay, I already have discovered the answer much like how Penicillin was discovered.

You see, playing around with this code, I mistakenly set contenteditable to true for the span and voila! It worked!

So, to make a span NON-contenteditable inside a contenteditable div, you just set its contenteditable attribute to true!

<div contenteditable="true">
  Luke, I am your father.
  <span contenteditable="true">I'm your son?! Ewww!</span>
  Don't speak back to me!
</div>

Here's the file to demonstrate (use IE8 to open it): https://codepen.io/hgezim/pen/qMppLg .

Lastly, I didn't post the question to get votes (although, they wouldn't hurt!), but since the solution was so ridiculous and I didn't find it here, I thought someone may find this tip time saving.

The problem with contenteditable="true" inside contenteditable="true" (to make it not editable) on IE is that double clicking on the inner element makes it editable

Solution

Grandparent tag as contenteditable true

Parent tag as contenteditable false

Child tag as contenteditable false

the contents of child tag will not be editable for sure

    <ul contenteditable="true">
        <li>By default, this content is editable via its 
        inherited parent elements value.</li>

    <li contenteditable="false" ><span contenteditable="false">This content is     
    <b>not</b> 
    editable for sure</span></li>
    </ul>

JSFiddle example

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

<div class="simulated-icon"><span>Icon text</span></div>

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.