[ACCEPTED]-Setting the caret position to an empty node inside a contentEditable element-contenteditable

Accepted answer
Score: 14

Set the element's innerHTML to a zero-width character:

('element').innerHTML = '&#200B';

Now 1 the carret can go there.

Score: 6

IE's selection/range model is based around 22 indexes into text content, disregarding 21 element boundaries. I believe it may be 20 impossible to set the input focus inside 19 an inline element with no text in it. Certainly 18 with your example I cannot set focus inside 17 the last element by clicking or arrow keys.

It 16 almost works if you set each span to display: block, though 15 there's still some highly strange behaviour, dependent 14 on the existence of whitespace in the parent. Hacking 13 the display to look inline with tricks like 12 float, inline-block and absolute position 11 make IE treat each element as a separate 10 editing box. Relative-positioned block elements 9 next to each other work, but that's probably 8 impractical.

If it makes you feel any better, IE9 7 finally fixes this unpleasantness and adopts 6 the standard range model. (Hooray!)

it's 5 acceptable to have whitespace in the last 4 node if the caret is at the very start.

I'd 3 probably do that, then, unless an IE selection 2 expert can think of anything better. (Calling 1 Tim Down!)

Score: 3

I found a workaround for Webkit, don't know 13 if anybody found this before but instead 12 of programmatically appending a zero-width 11 space, you can do the same thing with the 10 css3 content property in the after psuedo-selector 9 of the elements you want to put the caret 8 in. This has the advantage that the extra 7 characters don't show up in the DOM and 6 the user can't navigate the caret between 5 it. So basically it doesn't need cleaning 4 up.

For this to work for any child element 3 of your content editable element it would 2 be something like this:

#mycontenteditableelement *:after {
    content: '\200B';
}

I didn't check completely, but 1 I suspect this is a full workaround.

Score: 2

For me setting it content of contenteditable 3 div to <br> works. I tried setting it to nbsp; but 2 that creates extra character space in the 1 div before i start editing.

Hope this helps.

Score: 1

A bit late to the party but I used Unicodes 7 Zero-Width No Break Space (&#65279;) . Then on an 6 event thats called after the users input 5 takes place, remove the Zero-Width No Break 4 Space.

I had many issues with using the Unicode 3 space issue, mostly bad UX. This prevents 2 the user from ever knowing there was an 1 issue.

Score: 0

Applying a minimum height and minimum width 6 to elements inside contenteditable with 5 inline-block can do some good, though the impact 4 has unintended side effects:

#multiple * {
    min-height: 1em;
}
span, b, strong, i, em, a, etc {
    display: inline-block;
    min-width: 1em;
    background-color: hsla(0, 50%, 50%, .5); /* this is only a visual aid; discard @ will */
    vertical-align: middle; /* so elements w/ inline-block align w/ text correctly */ 
}

You'll find 3 there are still issues, but if you're willing 2 to sacrifice some problems for a smaller 1 set of others, this can so some good.

More Related questions