contenteditable = false contenteditable = true块在IE8中仍然可以编辑

Question

我有以下HTML打算确保内部span不可编辑。这适用于其他浏览器，但不适用于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>

这是一个JSFiddle来说明这一点（使用IE8来测试它）：http://jsfiddle.net/haxhia/uUKPA/3/。

我如何确保IE8也能正确处理？

Answer 1

好吧，我已经发现了答案，就像Penicillin was discovered一样。

你看，玩这个代码，我错误地将contenteditable设置为true为span和瞧！有效！

所以，为了让span在一个令人满意的div中无法满足，你只需将它的contenteditable属性设置为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>

这是要演示的文件（使用IE8打开它）：https://codepen.io/hgezim/pen/qMppLg。

最后，我没有发布问题来获得投票（虽然，他们不会受伤！），但由于解决方案太荒谬了，我没有在这里找到它，我认为有人可能会发现节省时间。

Answer 2

在IE上contenteditable =“true”内部contenteditable =“true”（使其不可编辑）的问题是双击内部元素使其可编辑

解

Grandparent tag as contenteditable true

Parent tag as contenteditable false

Child tag as contenteditable false

子标记的内容无法编辑

    <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

Answer 3

今天我遇到了同样的问题，经过一段时间的尝试，我认为这个解决方案适用于IE。将click事件侦听器添加到子contenteditable元素。在事件处理程序中执行如下操作

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

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

正如您在此处看到的那样，对于可编辑的子内容，在click事件侦听器上返回false会告诉IE不允许编辑。如果父节点上有单击事件，并且我们检查是否在事件侦听器中单击了目标子节点，则此方法有效。祝好运。