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

by

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.

Leave a Comment

tech