HTML5 contenteditable - nested non editable spans and cursor position behavior

Question

I'm trying move the cursor around placeholders (tags) within a contenteditable div.

If you look at the following fiddle and screenshot:

using Chrome placing the cursor on the right side of the RED tag, if I push the left arrow key the cursor goes up right next to "some" instead of staying in the same line as the RED tag, on its left side.

Chrome seems to be the only browser where I'm experiencing this behavior. I could listen to key down events and somehow control this behavior, but that seems over the top and quite hacky.

Is there a reasonable explanation for this and a possible smooth workaround?

.red {
  background-color: red;
}
.orange {
  background-color: orange;
}
.id {
  color: white;
}

<pre>
<div dir="ltr" class="contenteditable" contenteditable="true">some<br><placeholder class="red" contenteditable="false" unselectable="on"><span class="id">ID</span> TAG</placeholder> <placeholder class="orange" contenteditable="false" unselectable="on"><span class="id">ID</span> TAG</placeholder> text
</div>
</pre>

<p>
Instructions:<br>
Put the cursor on the right hand side of the orange tag.<br>
If you move the cursor to the left you will notice 2 unwanted behaviors:<br>
1: the cursor is invisible inbetween the TAGs<br>
2: when the cursor is placed on the right side of the red tag, if you move to the left, it will go directly up right next to "some". The expected would be on the left side of the red tag.<br>
</p>

The cursor color is the same as the text color. Your text is white, so the cursor is white, your background there is also white, and so, you can't see it. — pol, Sep 02 '16 at 09:49
OK, I see you've made the "id" placeholder unselectable, so that's why the cursor disappears. — pol, Sep 02 '16 at 09:55
even when it's unselectable=off the behavior is the same. the cursor shouldn't even go inside the span which is set to white color. — pelican_george, Sep 02 '16 at 09:58

score 1 · Accepted Answer · answered Sep 02 '16 at 11:36

1

This is tricky. The best I came up with is: https://jsfiddle.net/7u4o99o9/1/

.tag {
    display: inline-block;
    padding: 5px 5px;
}

.tag-body {
    padding: 3px;
    border-radius: 4px;
}

.red .tag-body {
    background-color: red;
}
.orange .tag-body {
    background-color: orange;
}

.id {
    color: white;
}

Another option is to use a ready-made library such as: http://xoxco.com/projects/code/tagsinput/example.html

answered Sep 02 '16 at 11:36

Martin Gottweis

2,721
13
27

I see that you nested the spans in a div. Does the job, but it will be hard to maintain. – pelican_george Sep 02 '16 at 12:59
Chrome uses adding
as newline when you press enter in newline. Having
s in contenteditable is therefore not a good idea. Check out more info here: http://stackoverflow.com/questions/6023307/dealing-with-line-breaks-on-contenteditable-div
– Martin Gottweis Sep 05 '16 at 07:23

HTML5 contenteditable - nested non editable spans and cursor position behavior

1 Answers1