Left and right button misbehaving when trying to add an empty span to contenteditable div

Question

In my project, I am trying to add a span wherever the caret is in the contenteditable div. This span element will be used as getting the offset position of the caret indirectly.

var _spanElem = "<span class='spanPos'></span>";

Now , I can get the care position in the contenteditable div and also I know how to remove and add the span element at the caret position.

But the thing is that while I am doing this operation, Left and Right buttons are misbehaving.

Please have a look at this link

    _result.remove('.spanPos'); //removing
    var text = _fullText.slice(0, _caretPos) + _spanElem + _fullText.slice(_caretPos);
    _result.html(text);  //adding at new position

When you press right button, the span element is removing and adding to the new caret position successfully but on pressing left button, the caret is moving to initial position instead of next position.

Any fix to this?

I am looking for a solution which works in IE8+ and firefox (chrome is optional).

Answer 1

I figured out the problem and I fixed the missbehaving left and right, here is the updated fiddle http://jsfiddle.net/2PS3m/5/ with the fixes included.

What was happening is:

In your setAutoCompletePos() function you were essentially replacing the content of your _result element completely ( _result.html(text); ) which made it lose its selection and was jumping at the beginning

What seemingly was a misbehaving keys, was actually loss of original text + selection/ caret position

the solution to that was to do restoreSelection() after you changed the contents of your element, which essentially sets back the caret to where it was.

I also changed the keydown to keyup and added a mouseup event to the element in order to save the initial selection before anything happens.

For operations like this is best to use keyup event instead of keydown to allow the caret to change position before you do the operations you need.

The mouseup event is used essentially to capture the user's click within the text and stores the initial position of the caret in a variable that I added in your code.

so your setAutoCompletePos function became like this and works as expected:

function setAutoCompletePos() {
    var offsetPos;
    _result.remove('.spanPos');
    var text = _fullText.slice(0, _caretPos) + _spanElem + _fullText.slice(_caretPos);
    _result.html(text);
    restoreSelection(_result.get(0), _savedSel); //added this
    offsetPos = $('.spanPos').offset();
}

Get the code from the modified fiddle http://jsfiddle.net/2PS3m/5/ try it and tell me if it works for you, my tests on it, show that it works as expected without cursor jumping at the beginning.