在嵌套的contentEditable之后设置光标位置

Question

我有这个标记

<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>

插入符号目前处于.field跨度.

我需要移动回出来后的.field父contentEditable.

如何通过javascript(如果需要使用jQuery)来实现？

当插入符号位于.value范围内时,它将尝试在keydown事件上触发它,如图所示.

Answer 1

对之前答案的更新。 http://jsfiddle.net/GLzKy/4/

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

更新

用评论中的正确答案更新了答案

要直接移动到当前字段之后，您可能需要使用 range.setStartAfter 和 range.setEndAfter：http://jsfiddle.net/GLzKy/5