Question

我正在尝试制作内容可编辑且不可编辑的容器。用户可以使用它作为3种方式。

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

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

＆＃13;

#content{
    border:1px solid red;
    height:100px;
}

.subContentNotEdit{
    background:#87a476;
}

.subContentEdit{
    background:#ffd5d5;
}

＆＃13;

<div id="content" contenteditable=true>
    <div class="subContentNotEdit" contenteditable=true>Editable</div>
    <div class="subContentEdit" contenteditable=false>Not editable</div>
    Enter text here..
</div>

＆＃13;

问题：在ie9中，subContentNotEdit div仍可编辑。（我发现，因为它的父母具有可编辑的真实性！）

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

任何人都可以帮助我吗？

Answer 1

在IE中它实际上正在工作，“假”标志得到尊重，但是如果你双击它，它会进入editmode（可能是因为双击事件会冒泡到父级？）。

我的建议是将您的不可编辑内容放在::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不起作用

1 个答案: