在 contenteditable div 中保持光标位置 [重复]答案

【问题标题】：Maintain cursor position in contenteditable div [duplicate]在 contenteditable div 中保持光标位置 [重复]
【发布时间】：2013-04-18 03:27:44
【问题描述】：

首先，这和这些类似：

Editing Iframe Content in IE - problem in maintaining text selection

How to get caret position within contenteditable div with html child elements?

基本上，我正在编写类似于 twitter 中的新推文编辑器的内容。在 div 和 contentEditable 设置内，我正在解析文本。当我检测到我认为是 URL 时，我会删除该文本并输入 div 内的 <a> 标记（例如，输入的 go to www.google.com 消息变为 Go to <a href='..'>www.google.com</a>。但是，当我这样做时，插入符号的位置会丢失.

在其他 SO 帖子中使用 @Tim-Down 的建议只有在您不编辑 DOM 时才有效（如他所说）。我正在编辑 DOM，所以插入符号的位置丢失了。

是否有可能（最好不使用引用的 Rangy 库）通过处理当前代码来实现这一点。

我目前拥有的代码（来自其他 SO 帖子）：

var saveSelection, restoreSelection;
if (window.getSelection) {
    // IE 9 and non-IE
    saveSelection = function(win) {
        var sel = win.getSelection(), ranges = [];
        if (sel.rangeCount) {
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                ranges.push(sel.getRangeAt(i));
            }
        }
        return ranges;
    };

    restoreSelection = function(win, savedSelection) {
        var sel = win.getSelection();
        sel.removeAllRanges();
        for (var i = 0, len = savedSelection.length; i < len; ++i) {
            sel.addRange(savedSelection[i]);
        }
    };
} else if (document.selection && document.selection.createRange) {
    // IE <= 8
    saveSelection = function(win) {
        var sel = win.document.selection;
        return (sel.type != "None") ? sel.createRange() : null;
    };

    restoreSelection = function(win, savedSelection) {
        if (savedSelection) {
            savedSelection.select();
        }
    };
}

我是这样使用它的：

$('div').on('keyup paste', function(e) {
    var ranges = saveSelection(window);
    var newContent = /* Get the new HTML content */;
    $('div').html(newContent);
    restoreSelection(window, ranges);
});

【问题讨论】：

标签： javascript dom

【解决方案1】：

如果用户看到的文本保持不变（您的问题似乎暗示了这种情况），您可以使用基于字符偏移的解决方案。我已经在 Stack Overflow 的其他地方发布了一些代码：

https://stackoverflow.com/a/13950376/96100

【讨论】：

太完美了（第一个链接就完成了）
刚刚发现了这个解决方案的一个错误。一切正常，但如果您在 div 中输入新行，则光标会回到前一行（可能是因为输入了 div）。
@MattRoberts：是的。此方法存在局限性，它仅基于文本节点，因此不考虑 <br> 和块元素隐含的换行符。
也许如果我检测到 keyCode 为 13（输入键），然后编写一些逻辑以转到 div 中的最后一个位置...
它似乎在 FF 中玩得很好，但在 chrome 中却不行 - 为你添加了一个简单的 jsfiddle ：jsfiddle.net/mattwoberts/xjhsh - 只需尝试在那个可编辑的 div 中点击 chrome 中的 return。