jquery - 在嵌套内容之后设置光标位置可编辑

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 范围内。

我需要将它移回之后父级 contentEditable 中的 .field。

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

当插入符号位于所示的 .value 范围内时，它将尝试在按下事件时触发它。

Answer 1

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

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

更新

更新答案，评论中有正确答案

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