Question

我正在使用箭头键在可编辑的div之间移动，并且使用光标位置值（window.getSelection().anchorOffset）来指示光标的位置值，并知道何时到达光标的开始或结束位置一个div当我向左移动（光标位于位置0时向左箭头）时，我希望光标移至上一个div的右端。我发现了Tim Down's answer，的确确实允许我将光标移动到上一个div。然后，使用Tim的额外注释，我可以将光标置于上一个div的右边缘。但是，我发现报告的光标位置值与实际的光标位置（在Chrome中）不匹配。

作为对duplicate of the question的回应，格林先生发布了一个小提琴，我已经modified to show the issue。

var result = $('#result');

$('#result').keydown(function(e) {
    curposondown = window.getSelection().anchorOffset;
    console.log(`cursorposondown: ${curposondown}`);
});
$('#result').keyup(function(e) {
    console.log(e);
    var element = e.currentTarget;
    var key = e.which;
    var text = element.textContent;
    var pos = window.getSelection().anchorOffset;
    console.log(`text: ${text}`);
    console.log(`text length: ${text.length}`);
    console.log(`char: ${e.which}`);
    console.log(`cursor: ${pos}`);
});

$('.click').click(function () {
    var preHtml = result.html();
    result.html(preHtml + "hello");

    result.focus();
    placeCaretAtEnd( document.getElementById("result") );
});

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钩子的原因，以区分光标第一次移至0（不应移至上一个div的时间）与它已经为0的时间（应何时移开）。）请特别注意什么当您按向右箭头时，位置值将报告在文本的右端。

现在按“单击以添加文本”按钮以附加“ hello”字符串，然后让代码将光标移动到文本的右侧。然后按向右箭头，请注意光标位置表明光标位于位置1（上下键）。

这意味着我目前无法检测到光标在文本的右侧。（因此，光标不能立即移至下一个div，就像通常在该位置一样。）用户使用向左箭头键向左移动一个字符，然后使用向右箭头键向后移动时，光标位置会自行纠正。

因此，问题是，有没有办法确保更新光标位置值以匹配实际光标位置？还是我在这里做其他不建议的事情？

jQuery将游标设置为contenteditable div中具有正确游标位置的最后位置

0 个答案: