How to set caret/cursor position in a contenteditable div between two divs.

Question

Consider the following contenteditable div.

bold text
bold text


        
                      

              相关标签:
       
      

Answer 1

Another thing you can do is use a Mutation Observer to catch the mutations and then fix them up after the fact. In my use case I was fortunate in that each element had predefined text. When the mutation observer fires, I simply moved changed text to a new text node before or after the element as appropriate. This seems a lot easier than the other options because the observer fires for all changes to character data, and it also has a proper record of all of the changes, unlike say keypress event.

Answer 2

My answer will be just an addition to Tim's one, which is comprehensive.

AFAIK Facebook doesn't use content editable. Status box is made of a simple textarea and div layer underneath it on which they render blue rects for nicks.

Although, even if they did, that would be a different case, because nick would be an inline element and luckily with inline elements situation is simpler :).

Regarding positioning caret at inaccessible places - at CKEditor we had the same problem. There are many places where user can't move caret. We decided to solve this issue with a plugin called Magic-line. As you can see in the demo we bypassed the problem with selection completely and I think that this is the best way to solve this issue. It's very usable and in CKEditor 4.0.1 it will be (and already is on master) also fully accessible by keystrokes.

Answer 3

Browsers are inconsistent on this. Firefox will let you position the caret in more positions than most browsers but WebKit and IE both have definite ideas about valid caret positions and will amend a range you add to the selection to conform to the nearest valid position. This does make sense: having different document positions and hence behaviours for the same visual caret location is confusing for the user. However, this comes at the cost of inflexibility for the developer.

This is not documented anywhere. The current Selection spec says nothing about it, principally because no spec existed when browsers implemented their selection APIs and there is no uniform behaviour for the current spec to document.

One option would be to intercept the keypress event as you suggest, although this will not help when the user pastes in content using the edit or context menus. Another would be to keep track of the selection using mouse and key events, create elements with, say, a zero-width space character for the caret to be placed in and place the caret in one those elements when necessary. As you say, ugly.