在嵌套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屋!