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 <

Solution 1:

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

<br><br><divclass ="container"contenteditable="true"><spanclass="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: 030px030px;
    font-size:20px;
}

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

}

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

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

Solution 3:

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