如何将光标移动到 ContentEditable Span 的 beginning/end

Question

我见过其他类似的问题，但不太清楚每个问题的正确方法是什么。我的假设是将光标移动到 ContentEditable 的前面，您只需将焦点放在该元素上。将光标移到后面需要某种 polyfil 解决方案。

我的 fiddle 中的预期功能是将光标移动到中间包含 "token" (div) 的文本框。当焦点位于令牌上时，用户可以将其删除，或继续使用箭头键向左或向右移动。在询问如何移动到 ContentEditable 末尾的其他问题中看到的常见解决方案是下面的函数，当用户关注令牌并单击左箭头键时，我尝试使用它：

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();
    }
}

当用户将注意力集中在令牌上并按下向右箭头键时，我尝试将注意力集中在下一个跨度上，假设它会将光标集中在前面。我看到了奇怪的行为，在这两种情况下，第一个字母都被跳过了。了解为什么会发生这种情况？

谢谢。

Answer 1

在您的 keydown 函数中，当您到达下一个（或上一个）元素的末尾（或开始）时，您可以更改它的事件目标。

更改目标后发生了什么？按键默认行为。因此，如果您输入向右箭头，则到达终点，更改目标...并且光标向右移动，因为这是默认行为。

解决方法是什么？您可以使用 return false 阻止默认行为。所以你的 keydown 事件中右箭头的代码应该是这样的：

        if (event.keyCode == 39) { //Right arrow
            var nextSpan = selectedToken.next();
            if (nextSpan.length) {
                nextSpan.focus();
                selectedToken.removeClass('selectedToken');
            }
        return false;
        }

Here 是您更新后的 fiddle。

如何将光标移动到 ContentEditable Span 的 beginning/end

How to move cursor to beginning/end of ContentEditable Span

html

javascript

jquery

contenteditable

cursor-position