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

Posted 2021-04-14

我有以下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也能正确处理？

答案

好吧，我已经发现了答案，就像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。

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

另一答案

在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

另一答案

今天我遇到了同样的问题，经过一段时间的尝试，我认为这个解决方案适用于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>

以上是关于contenteditable = false contenteditable = true块在IE8中仍然可以编辑的主要内容，如果未能解决你的问题，请参考以下文章

contenteditable属性

如何在contenteditable div中删除非contenteditable div

如何在我的angularjs指令中切换属性的值，如contenteditable？

三行代码 解决vue中设置div contenteditable光标移动到最后

三行代码 解决vue中设置div contenteditable光标移动到最后

execCommand() 不会“取消粗体”文本