1

我有一个#recommendTextArea可编辑的 div ( )，当用户单击列表（称为.display_box）时，我尝试在其中修改此 div 的 innerHTML，该函数如下所示。基本上它会在 div 的 innerHTML 上附加一个跨度，然后隐藏它friendList，在隐藏它时，它也会尝试restoreTheSelection在附加我调用的额外跨度之前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();
        }
    }
}

但是，这并没有按预期工作，当我单击某个项目时，光标无处可见。我在这里做错了什么？

4

1 回答 1

2

你有几个问题：

1）时间："click"事件太晚了，无法抓住选择（总是调试这个，很容易看到可编辑的 DIV 到那时早已失去焦点和选择）。改为使用"mousedown"。

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

3) 与 1) 一样，焦点对于保持选择至关重要，因此单击列表.. 确保在退出处理程序之前阻止默认设置，因此焦点和新选择将保留在 DIV 中。

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

于 2013-05-17T11:35:50.480 回答