Javascript 如何将光标移动到可编辑范围的开头/结尾

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

小提琴：

我的小提琴的预期功能是将光标移到一个文本框中，其中包含一个“令牌”（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默认行为。所以，如果你输入了正确的箭头，你到达了终点，你改变了你的目标。。。因为这是默认行为，所以光标会向右移动

解决办法是什么？您可以使用

return false

防止默认行为。因此，您的keydown事件中右箭头的代码如下所示：

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

---

是您最新的小提琴。

谢谢！我甚至没有想到默认行为会继续这样。