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并瞧！它奏效了！

因此，要在可信任的div中设置span NON-contenteditable，您只需将其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>

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

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

3 个答案: