我正在尝试制作内容可编辑和不可编辑的容器。用户可以通过 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仍然是subContentNotEditdiv 是可编辑的。 （我发现，因为它的父级具有可编辑的 true！）
它可以很好地与chrome and 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
