`ie9` - contenteditable false not working when parent editable

问题

I am trying to make a content editable and non-editable containers. the user can use this as 3 ways.

1. they can put content with non-editable

2. they can put the content with editable

3. they can put the content without selecting one of this. (editable)

I am trying to achieve this as follows:

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

Issue: in ie9 still the subContentNotEdit div is editable. (i found that, because it's parent has the editable true!)

It works fine with chrome and firefox but not in ie9. since my customer requires this option for ie9 i am require to find a solution.

Can any one help me please?

回答1:

In IE it actually is working that the "false" flag is respected, but if you double-click on it, it goes into editmode (possibly because the double-click event bubbles up to the parent?).

My suggestion would be to put your non-editable content in an ::after element (since no browser will find a caret position inside it to allow it to be edited) like so:

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

来源：https://stackoverflow.com/questions/28854129/ie9-contenteditable-false-not-working-when-parent-editable