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

Question

我正在尝试制作一个内容可编辑和不可编辑的容器。用户可以将其用作 3 种方式。

他们可以把内容放在 non-editable
他们可以把内容放在editable
他们可以在不选择其中一项的情况下放置内容。（可编辑）

我正在努力实现如下：

#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 中，subContentNotEdit div 仍然是可编辑的。（我发现，因为它的父项具有可编辑的 true！）

它适用于 chrome 和 firefox 但不适用于 ie9。因为我的客户需要这个选项 ie9 我需要找到一个解决方案。

谁能帮帮我吗？

Answer 1

在 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>

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

`ie9` - contenteditable false not working when parent editable

html

javascript

css

jquery

internet-explorer-9