javascript - 範囲オブジェクトを使用してFirefoxでカーソル位置を設定すると、カーソルが所定の位置にロックされます

Question

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 に挿入された直後に呼び出されます。

ありがとう！