How can I type inside the parent contentEditable div?

问题

How can you type inside a contentEditable div outside of a child contentEditable div without retaining the child's class, and without changing contenteditable to false.

FIDDLE

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

Should be this:

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

Not this:

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

回答1:

You should be able to click in the red box and type red.

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

}

回答2:

I changed a little bit of your code, maybe you can try this and I hope it helps you. :)

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

回答3:

Like this, by adding an invisible character to trick the browser &zwnj; http://jsfiddle.net/bq6jQ/4/ . I also add an extra <span> to avoid a caret visual bug

来源：https://stackoverflow.com/questions/22599694/how-can-i-type-inside-the-parent-contenteditable-div

标签

javascript

jquery

html

contenteditable