32

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?

Gezim
  • 6,076
  • 10
  • 52
  • 76

3 Answers3

35

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.

Gezim
  • 6,076
  • 10
  • 52
  • 76
  • 2
    Sorry, have to down-vote this because that is the kind of behavior that will be interpreted as a bug and eventually (even if it will takes years) be changed so the second element is still editable. – John Aug 05 '12 at 06:10
  • 15
    @John, meanwhile people have to fix this issue, today. Do you actually think Microsoft will fix this in IE8?! – Gezim Aug 06 '12 at 18:19
  • @user1868084, I just uploaded the solution as a file here: https://www.dropbox.com/s/2yc3rrtkji3rupr/contenteditableIE8.html download it and use IE8 to see the solution. – Gezim Oct 29 '13 at 23:05
  • 6
    Upvoted, because this is exactly how Microsoft implements their contenteditable div in Outlook Web Access's "To Addresses" field. In IE, inner span (that we do not want editable) set to true, in Chrome, it is set to false. Both work, IE's doesn't make sense. – Sully Jul 30 '14 at 18:24
  • 1
    As pointed out by Alexvx, this solution is not airtight. The user can still edit the inner element after double-clicking it. – Ruud Helderman Jan 27 '16 at 14:02
  • @Sully, as @Alexvx noted in another answer `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`. Actually it makes them resizable as well. Do you know how Microsoft resolves that in Outlook Web Access's "To Addresses" field? – jayarjo Nov 06 '16 at 19:10
  • @jayarjo @Sully Adding `pointer-events: none;` to the inner HTML element's css and adding `ondragstart = e => e.preventDefault()` to the content editable parent seems to solve the issue of allowing users to double click as well as resize/drag the inner HTML. – adlondon Nov 22 '19 at 16:33
18

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

Alexvx
  • 181
  • 1
  • 3
  • 3
    Even this solution is not airtight. Carefully navigating with the arrow keys, you can bring the caret into the non-editable element, and edit at will. To reproduce, go to the fiddle, click on the second line, then press down key. This brings your caret into the third line that was supposed to be impenetrable. Tested in IE11; trying not to bother with older versions anymore. – Ruud Helderman Jan 27 '16 at 14:32
  • What if you simply disable doubleclick on inner cE elements? – jayarjo Nov 06 '16 at 18:45
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;
 });
 
 
<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.

Chetan Chandrashekar
  • 139
  • 1
  • 3