Question

我有一个div标签，我可以编辑。

我不希望该标记中包含任何HTML，因此我不允许用户输入任何HTML。但是，当用户进行复制/粘贴时，不一定要包含标签。

我有一些jQuery代码来捕获paste事件，以防万一我尝试使用我的saveSelection()和restoreSelection()函数，我在下面显示哪些函数在很多情况下找到但是在这里失败...

jQuery("#that_div").on("paste", function()
    {
        setTimeout(function()
            {
                // remove any HTML
                var selection = saveSelection();
                jQuery("#that_div").text(jQuery("#that_div").text());
                restoreSelection(selection);
            }, 0);
    });


function saveSelection()
{
    var sel;

    if(document.selection)
    {
        return document.selection.createRange();
    }
    else
    {
        sel = window.getSelection();
        if(sel.getRangeAt && sel.rangeCount > 0)
        {
            return sel.getRangeAt(0);
        }
        else
        {
            return null;
        }
    }
    //NOTREACHED
}

function restoreSelection(range)
{
    var sel;

    if(document.selection)
    {
        range.select();
    }
    else
    {
        sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange((range));
    }
}

你知道它失败的原因吗？

Answer 1

当您更改可编辑div中的DOM节点时，div内部或部分范围内的任何范围都必须更改以适应更改。如果您完全替换内容，就像您的代码那样，范围边界相对的节点将被销毁，范围必须恢复为默认状态。

您可以使用基于字符偏移的解决方案。例如：Can't restore selection after HTML modify, even if it's the same HTML

在用可疑的div中用文本替换HTML时，有没有办法不丢失焦点选择？

1 个答案: