恢复/保存选择时可满足的div问题

Question

我有一个div (#recommendTextArea)，这是可编辑的，其中，我试图修改这个div的innerHTML当用户单击列表(这被称为.display_box)，函数看起来像这样。基本上，它将一个span添加到div的innerHTML中，然后隐藏friendList，在隐藏之后，它还尝试restoreTheSelection，在添加额外的span之前，我称之为saveSelection。

$(".display_box").live("click",function() 
    {
        selRange = saveSelection();
        console.log(selRange);
        var username = $(this).attr('title');
        var old = $("#recommendTextArea").html();
        var content = old.replace(word, " "); //replacing @abc to (" ") space
        var E ="<span contenteditable='false'>"+ username + "</span> ";
        content = [content.slice(0, start), E, content.slice(start)].join('');
        $("#recommendTextArea").html(content);
        $("#friendsList").hide(function(){
            restoreSelection(selRange);
        });
    });

我有以下功能来恢复和保存选择:

function saveSelection() {
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            return sel.getRangeAt(0);
        }
    } else if (document.selection && document.selection.createRange) {
        return document.selection.createRange();
    }
    return null;
}
function restoreSelection(range) {
    if (range) {
        if (window.getSelection) {
            sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (document.selection && range.select) {
            range.select();
        }
    }
}

然而，这并没有像预期的那样工作，当我点击一个项目时，光标不在哪里可以看到。我哪里做错了?

Answer 1

你有几个问题:

1) Timing: "click"事件太迟了，无法抓取选择(总是调试这个，很容易看到可编辑的DIV在那个时候已经失去了焦点和选择)。用"mousedown"代替。

2)您不能像这样存储选择范围-更改选择上下文(在您的情况下，commonAncestorContainer的innerHTML)将擦除该范围(出于某种原因，甚至克隆的范围对象也会被擦除)。如果您设法获得副本(例如通过jQuery.extend)，它将无效，因为其中的文本节点不能保证保持不变。我最好的猜测是存储开始/结束偏移量，如果需要的话，根据范围需要存储相关节点。修改HTML后恢复范围属性

3)与1)焦点是保持选择的关键，所以点击列表。确保在退出处理程序之前避免默认设置，这样焦点和新选择将保留在DIV中。

不能从你的代码中找出确切的用例，但这是我的测试样本，你可以根据需要从这里调整:http://jsfiddle.net/damyanpetev/KWDf6/