Question

我有一个div（#recommendTextArea），它是可编辑的，我尝试在用户点击列表时修改此div的innerHTML（这称为.display_box），该函数看起来像这样。基本上它会在div的innerHTML上附加一个span，然后它会隐藏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）计时："click"事件为时已晚，无法进行选择（总是调试一下，很容易看到可编辑的DIV长时间失去焦点并且当时选择）。请改用"mousedown"。

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

3）与1）焦点对于维护选择至关重要，因此单击列表..确保在退出处理程序之前阻止默认值，以便焦点和新选择将保留在DIV。

无法从代码中找出确切的用例，但这是我的测试样本，您可以根据需要从此处进行调整：http://jsfiddle.net/damyanpetev/KWDf6/

恢复/保存选择时的contenteditable div问题

1 个答案: