在嵌套contentEditable之后设置光标位置 [英] Set Cursor position after nested contentEditable

问题描述

我有这个标记

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

插入符号当前处于<​​c0>范围内.

The caret is currently in the .field span.

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

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

如何通过javascript(如果需要，可以使用jQuery)来完成此操作?

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

当插入符位于.value跨度时，它将尝试在keydown事件上触发它，如图所示.

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

推荐答案

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

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

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

更新

更新后的评论中包含正确答案

Updated answer with correct answer in comments

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

这篇关于在嵌套contentEditable之后设置光标位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！