Question

如何在子contentEditable div之外键入contentEditable div，而不保留子类，并且不会将contenteditable更改为false。

<div class ="container" contenteditable="true">        
    <span class="meatball" contenteditable="true">meatball</span>
</div>

应该是这样的：

<div class ="container" contenteditable="true">        
    <span class="meatball" contenteditable="true">meatball</span> spaghetti
</div>

不是这个：

<div class ="container" contenteditable="true">        
    <span class="meatball" contenteditable="true">meatball spaghetti</span>
</div>

Answer 1

您应该可以点击红色框并输入红色。

    <br><br>

<div class ="container" contenteditable="true">        
    <span class="meatball" id="meatball" contenteditable="true">meatball</span> spaghetti
</div>
<!-- will work with contenteditable="false" but then I can't type blue-->

CSS

#meatball{
    border: 1px dashed blue;
    color:blue;
    padding: 0 30px 0 30px;
    font-size:20px;
}

.container{
    border: 1px dashed red;
    color:red;

}

Answer 2

我改变了一些你的代码，也许你可以尝试这个，我希望它可以帮助你。：）

#meatball{
    border: 1px dashed blue;
    color:blue;
    padding: 0 30px 0 30px;
    font-size:20px;
    position:absolute;
    top: 0;
    left: 0;
}
.wrapper{
    position:relative;
}
.item{
    line-height:30px;
    min-height:30px;
}
.container{
    border: 1px dashed red;
    color:red;
    padding-left: 150px;
}

<div class="wrapper">
    <div class ="container item" contenteditable="true"></div>
    <div class="meatball w_o_r_d_s item" id="meatball" contenteditable="true">meatball</div>
</div>

Answer 3

像这样，添加一个不可见的字符来欺骗浏览器&zwnj; http://jsfiddle.net/bq6jQ/4/。我还添加了额外的<span>以避免插入符号视觉错误

如何在父contentEditable div中输入？

3 个答案: