`ie9` - contenteditable false当父母可编辑时不工作 [英] `ie9` - contenteditable false not working when parent editable

问题描述

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

1. 他们可以将不可编辑的内容

   code>




2. 他们可以用可编辑




3. 他们可以放入内容而不用选择其中的一个。 （可编辑）

我试图做到这一点如下：



  #content {border：1px solid red; subContentNotEdit {background：＃87a476;}。subContentEdit {background：＃ffd5d5;}  

 < div id =contentcontenteditable = true> < div class =subContentNotEditcontenteditable = true>可编辑< / div> < div class =subContentEditcontenteditable = false>无法编辑< / div>在此处输入文字..< / div>  

ie9 仍然可以编辑 subContentNotEdit div。 （我发现，因为它的父母是可编辑的真正的！）

它可以很好地与 chrome 和 firefox ，但不在 ie9 中。因为我的客户需要这个选项 ie9 我需要找到解决方案。

任何人都可以帮助我在IE中它实际上是在工作，假标志是尊重，但如果你双击它，它会进入editmode（可能是因为双击事件冒泡到父级？）。

我的建议是将不可编辑的内容放在 :: after 元素（因为没有浏览器会在它内部找到插入位置来允许它被编辑），如下所示：

  #content {border：1px纯黑色; subContentEdit {background：＃87a476;}。subContentEdit :: after {content：'Not editable'; height：100px;}。显示：块;背景：＃ffd5d5;}  

< div id =内容contenteditable =true> < div class =subContentEdit>可编辑< / div>在此处输入文字..< / div>

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?

解决方案

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>

这篇关于`ie9` - contenteditable false当父母可编辑时不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！