标签贴标后光标位置未正确定位

Question

When I type something after label then it concat in label's text The basic code is:

<p contenteditable="true">Hello, can I speak to <b><label>name</label></b>please?</p>

 label { border: 1px solid black; float: none; padding: 0px 10px; cursor: pointer; } 

 <p contenteditable="true">Hello, can I speak to <b><label>name</label></b>please?</p> 

What I need is when I type something out of the box of label then shouldn't bind with label's text it should be before please? text..there is something wrong with css.. I couldn't find out..Thanks

Answer 1

EDIT 2

"If user can delete space then what?"

My counter reply is:

What exactly is the purpose of this code?

Anyway, this is the final edit take it or leave it.

Wrap each segment in a <span contenteditable=true>...</span> and separate them with a   . If we want no space between the <span> s then we can use  ( zero width no-break space) instead of   Also note that the <label> and <p> tags wrap the <span> s. This preserves the HTML structure. See updated Snippet.

Seeing that OP requires HTML/CSS solution -- and never mentions JavaScript/jQuery -- this is the best solution I can think of. Anymore behavior needed would be beyond HTML/CSS capabilities and JavaScript/jQuery would be needed. Having said that, I believe this solution will work. It's now impossible for the <label> to bleed into the text outside of it's borders because the   is not editable now, yet each separate <span> is editable. When parsed, the only change in appearance is the blue outline. That shouldn't be a problem given the fact that OP has bold text with a border in the middle of a sentence.

EDIT

OP requires that everything is editable within the <p> . OP's concern was the <label> 's edits bleeding into the text. A   placed after the <label> seems to fix that behavior.

---

Add contenteditable="true" to the <label> instead of the <p>

SNIPPET

 label { border: 1px solid black; float: none; padding: 0px 10px; cursor: pointer; } 

 <p><span contenteditable="true">Hello, can I speak to</span>&nbsp;<label><span contenteditable="true"><b>name</b></span></label>&nbsp;<span contenteditable="true">please?</span></p> <p><span contenteditable="true">Hello, can I speak to</span>&#65279;<label><span contenteditable="true"><b>name</b></span></label>&#65279;<span contenteditable="true">please?</span></p>