Search code examples
jqueryhtmlcontenteditablecaret

Set Cursor position after nested contentEditable

I've got this markup

<div contentEditable="true">
    Some other editable content
    <div class="field" contentEditable="false">
        <span class="label">This is the label</span>
        <span class="value" contentEditable="true">This is where the caret is</span>
    </div>
    <!-- This is where I want the Caret -->
</div>

The caret is currently in the .field span.

I need to move it back out after the .field in the parent contentEditable.

Example

How can this be accomplished via javascript (with the use of jQuery if needed) ?

It will be trying to trigger it on a keydown event when the caret is in the .value span as shown.

Solution

  • An update to the previous answer. http://jsfiddle.net/GLzKy/4/

    placeCaretAtEnd($(this).parent().nextAll('.field').children('value'));

    UPDATE

    Updated answer with correct answer in comments

    For moving directly after the current field, you might want to use range.setStartAfter and range.setEndAfter: http://jsfiddle.net/GLzKy/5