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.

<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 the point (use IE8 to test it): http://jsfiddle.net/haxhia/uUKPA/3/ .

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

Answer 1

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.

Answer 2

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