7

我有这个标记

<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跨度中。

我需要在 parent之后将其移出。.fieldcontentEditable

例子

这如何通过 javascript 来完成（如果需要，可以使用 jQuery）？

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

4

2 回答 2

3

我假设您想进入下一部分。为了清楚起见，我添加了一个文本“这里！” 在演示中向您展示它确实会走到最后。

在下面的演示中，按Enter key从.field .value到结束。

演示：http: //jsfiddle.net/GLzKy/1/

下面是来自https://stackoverflow.com/a/4238971/297641的函数，它实际上完成了所有工作。

$('.field .value').keydown(function (e) {
    if (e.which == 13) { //Enter Key
        e.preventDefault();            
        placeCaretAtEnd($(this).closest('.parent')[0]);
    }
});

/**
  This below function is from https://stackoverflow.com/a/4238971/297641
  All credits goes to the original author.
*/
function placeCaretAtEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined"
            && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}

在 FF、IE8 和 Chrome 中测试

参考： https ://stackoverflow.com/a/4238971/297641

于 2013-01-24T23:21:22.970 回答
3

对上一个答案的更新。 http://jsfiddle.net/GLzKy/4/

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

更新

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

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

于 2013-01-25T23:54:16.793 回答