Question

我已经看到过这样的其他问题但是有点不清楚每种问题的正确方法是什么。我的假设是将光标移动到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();
    }
}

当用户专注于令牌并且他们点击右箭头键时，我会尝试专注于下一个跨度，假设它会将光标聚焦在前面。我看到奇怪的行为，在这两种情况下，第一个字母被跳过。对此为何发生的任何见解？

感谢。

Answer 1

在你的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;
        }

Here是您更新的小提琴。

如何将光标移动到ContentEditable Span的开头/结尾

1 个答案: