关于html：contenteditable = true内部的contenteditable = true块在IE8中仍可编辑


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

我有以下HTML旨在确保内部span不可编辑。 这在其他浏览器中有效，但不适用于IE8。

1
2
3
  Luke, I am your father.
  <span contenteditable="false">I'm your son?! Ewww!</span>
  Don't speak back to me!

这是一个JSFiddle来说明这一点(使用IE8进行测试)：http://jsfiddle.net/haxhia/uUKPA/3/。

如何确保IE8也能正确处理此问题？

相关讨论

好的，我已经找到了答案，就像发现青霉素一样。

您会发现，在处理这段代码时，我错误地将span和的contenteditable设置为true！有效！

因此，要使一个span在contenteditable div中成为非内容可编辑的，只需将其contenteditable属性设置为true！

1
2
3
  Luke, I am your father.
  <span contenteditable="true">I'm your son?! Ewww!</span>
  Don't speak back to me!

这是演示文件(使用IE8打开)：https://codepen.io/hgezim/pen/qMppLg。

最后，我没有发布问题来获得投票(尽管他们不会受到伤害！)，但是由于解决方案太荒谬了，而且我在这里没有找到它，所以我认为有人可能会节省这笔小费。

相关讨论

IE上contenteditable =" true"内的contenteditable =" true"(使其不可编辑)的问题是，双击内部元素使其可编辑

解

1
2
3
4
5
Grandparent tag as contenteditable true

Parent tag as contenteditable false

Child tag as contenteditable false

子标记的内容肯定无法编辑

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    <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    
    not
    editable for sure</span>
</li>

   
</ul>

JSFiddle示例

相关讨论

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

1
2
3
4
5
 document.querySelector('.simulated-icon').addEventListener('click', function(evt){
    evt.stopPropogation;
    evt.preventDefault;
    return false;
 });
1
<span>Icon text</span>

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