`ie9`-contenteditable false在父级可编辑时不起作用

`ie9` - contenteditable false not working when parent editable

本文关键字：编辑 不起作用 ie9 -contenteditable false      更新时间：2023-09-26

我正在尝试使内容成为可编辑和不可编辑的容器。用户可以使用这三种方式。

  1. 他们可以用non-editable 放置内容

  2. 他们可以用editable 来放置内容

  3. 他们可以在不选择其中一个的情况下放置内容。（可编辑）

我正在努力实现以下目标：

#content{
    border:1px solid red;
    height:100px;
}
.subContentNotEdit{
    background:#87a476;
}
.subContentEdit{
    background:#ffd5d5;
}
<div id="content" contenteditable=true>
    <div class="subContentNotEdit" contenteditable=true>Editable</div>
    <div class="subContentEdit" contenteditable=false>Not editable</div>
    Enter text here..
</div>

问题：在ie9中，subContentNotEditdiv仍然是可编辑的。（我发现了，因为它的父级有可编辑的true！）

它适用于chrome和firefox，但在ie9中不适用。由于我的客户需要ie9的此选项，我需要找到解决方案。

有人能帮我吗？

在IE中，尊重"false"标志实际上是有效的，但如果双击它，它就会进入编辑模式（可能是因为双击事件会冒泡到父级？）。

我的建议是将不可编辑的内容放在::after元素中（因为没有浏览器会在其中找到插入符号位置以允许编辑），如下所示：

#content{
    border:1px solid black;
    height:100px;
}
.subContentEdit{
    background:#87a476;
}
.subContentEdit::after {
    content:'Not editable';
    display:block;
    background:#ffd5d5;
}
<div id="content" contenteditable="true">
    <div class="subContentEdit">Editable</div>
    Enter text here..
</div>

相关文章：