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

【问题标题】：`ie9` - contenteditable false not working when parent editable`ie9` - contenteditable false 在父级可编辑时不起作用
【发布时间】：2015-03-04 12:08:55
【问题描述】：

我正在尝试制作内容可编辑和不可编辑的容器。用户可以将其用作 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 仍然是可编辑的。（我发现，因为它的父级具有可编辑的真实性！）

它适用于chrome 和firefox，但不适用于ie9。因为我的客户需要 ie9 的此选项，所以我需要找到解决方案。

谁能帮帮我？

【问题讨论】：

它应该可以在IE9上运行，caniuse.com/#feat=contenteditable
是的，但没有注意到 parents 的副作用。

标签： javascript jquery html css internet-explorer-9

【解决方案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>

【讨论】：