0
177
Viewson pressing enter in contenteditable its copying line style/title to next line
I have simple contententeditable div
<div contenteditable="true">
<p>
Line 1 <span title="action">action</span>
</p>
</div>
If the user click at the end of line 1 and press enter, then start typing. The next line also copies the same span's background. How to avoid it? see demo: https://jsfiddle.net/89z5d2r0/1/
·
Juan Pablo Isaza
2 answers
Answer question0
You can add a non-breaking space or   after the span tag to circumvent this behavior. See the snippet below:
div {
width: 200px;
height: 200px;
border: 1px solid #f1f2f3;
}
p span {
background: #ccc;
}<div contenteditable="true">
<p>
Line 1 <span title="action">action</span> 
</p>
</div>
·
Juan Pablo Isaza
Report
0
Because there is no text in the p tag and that's why text starts from the span tag. That's why text is written in a span tag with it's properties. At least add   after span tag.
div {
width: 200px;
height: 200px;
border: 1px solid #f1f2f3;
}
p span {
background: #ccc;
}<div contenteditable="true">
<p>
Line 1 <span title="action">action</span> 
</p>
</div>
·
Juan Pablo Isaza
Report
Answer question