2

我正在尝试将光标放在 contenteditable 节点中的特定字符位置，并且代码在 Chrome 中运行良好。但是在 Firefox 中，当我放置光标时，它会将光标锁定在适当的位置，因此当我键入它时，它会通过从右到左键入来显示（因此键入“hello world”会产生“dlrow olleh”

直到我尝试使用箭头键并意识到它不是处于 RTL 模式，而是锁定光标的位置之前，发生了什么并不明显。不过，退格键似乎确实可以正常工作，当我单击其他位置时，光标会按预期移动并且功能恢复正常。我不确定这是否是 Firefox 中的预期行为，或者我做错了什么。（同样，在 Chrome 中，我可以在放置光标后开始输入，并且行为如我所料）

我最初是用 rangy 写的，但是当它失败时（上面的结果）我尝试使用在这个评论中找到的代码，粘贴在下面：

function getTextNodesIn(node) {
    var textNodes = [];
    if (node.nodeType == 3) {
        textNodes.push(node);
    } else {
        var children = node.childNodes;
        for (var i = 0, len = children.length; i < len; ++i) {
            textNodes.push.apply(textNodes, getTextNodesIn(children[i]));
        }
    }
    return textNodes;
}

function setSelectionRange(el, start, end) {
    if (document.createRange && window.getSelection) {
        var range = document.createRange();
        range.selectNodeContents(el);
        var textNodes = getTextNodesIn(el);
        var foundStart = false;
        var charCount = 0, endCharCount;

        for (var i = 0, textNode; textNode = textNodes[i++]; ) {
            endCharCount = charCount + textNode.length;
            if (!foundStart && start >= charCount
                    && (start < endCharCount ||
                    (start == endCharCount && i < textNodes.length))) {
                range.setStart(textNode, start - charCount);
                foundStart = true;
            }
            if (foundStart && end <= endCharCount) {
                range.setEnd(textNode, end - charCount);
                break;
            }
            charCount = endCharCount;
        }

        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (document.selection && document.body.createTextRange) {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(true);
        textRange.moveEnd("character", end);
        textRange.moveStart("character", start);
        textRange.select();
    }
}

这会在内容插入到 contenteditable div 后立即调用，以恢复光标位置。

谢谢！

4

0 回答 0