如何将光标移动到ContentEditable Span的开始/结束

How to move cursor to beginning/end of ContentEditable Span

本文关键字：Span 开始 结束 ContentEditable 光标 移动      更新时间：2023-09-26

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

Fiddle：http://jsfiddle.net/ys04jkth/

我fiddle的预期功能是将光标移动到一个文本框中，该文本框中间包含一个"记号"（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();
    }
}

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

谢谢。

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

你改变目标后发生了什么？keydown默认行为。所以，如果你输入右箭头，你到达终点，你改变了目标。。。并且您的光标向右移动，因为这是默认行为。

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

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

这是你最新的小提琴。

相关文章：