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>

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

}

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

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

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