Question

我们有以下Javascript代码：

function makeEditableAndHighlight(colour) {
    sel = window.getSelection();
    if (sel.rangeCount && sel.getRangeAt) {
        range = sel.getRangeAt(0);

    document.designMode = "on";

        sel.removeAllRanges();
        sel.addRange(range);
    }

    if (!document.execCommand("HiliteColor", false, colour)) {
        document.execCommand("BackColor", false, colour);
    }
    document.designMode = "off";
}

// This is the highlighting function. It takes a color as an argument.
function highlight(colour) {
    var range, sel;
    if (window.getSelection) {
        try {
            if (!document.execCommand("BackColor", false, colour)) {
                makeEditableAndHighlight(colour);
                window.getSelection().removeAllRanges();
            }
        } catch (ex) {
            makeEditableAndHighlight(colour)
        }
    } else if (document.selection && document.selection.createRange) {

        range = document.selection.createRange();
        range.execCommand("BackColor", false, colour);
    }
}


// This returns the highlight to transparent (no highlighting) when the user clicks away in the document.
function body() {
    document.getElementsByTagName("body")[0].addEventListener(
    "click", 
    function(event){
      highlight('transparent');
    }
  );
}

它的工作原理如下：

当在页面中选择了文本时，如果按下按钮（例如扩展名弹出窗口），则该文本将获得黄色突出显示并自动取消选择。

这就是问题所在。

因为文本被自动取消选择，我无法将高亮显示恢复为相同的文本（因为不再有选择）

所以这个问题的焦点在于最后一部分，即：

function body() {
    document.getElementsByTagName("body")[0].addEventListener(
    "click", 
    function(event){
      highlight('transparent');
    }
  );
}

仅当我选择相同的文本并单击文档中的任何位置时，此方法才有效。

我希望它能如何工作，是能够点击文档中的任何位置，以及任何突出显示的文本将被设置回原始文件（如果原始版本不可能，则为透明文件）。

我的目标是任何文字，因为我在这里没有选择。

所以基本上这个函数应该像这样工作：

如果选择存在且按下按钮＆gt;突出显示所选内容并自动删除所有选择。

当在页面中的任何位置注册点击时，无论是否有选择，都要删除任何文本上的任何突出显示。

同样，这段代码似乎工作得非常好，直到最后一部分，“删除任何突出显示”部分。

Answer 1

您可以将您的调用替换为从主体突出显示，以获得额外的参数prevRange，这是一个全局参数。然后在调用后将prevRange重置为未定义。

突出显示的签名可以是

功能高亮显示（color，oldRange）{

并以

开头

function highlight(colour, oldRange) {
    var range, sel, oldSelection;
    if (typeof(oldRange) !== 'undefined') {
        oldSelection = window.getSelection();     
        oldSelection.removeAllRanges();   
        oldSelection.addRange(oldRange);
    }
    sel = oldSelection || window.getSelection(); 
    if (sel) {

该功能的其余部分可以与sel一起使用在取消选择之前，旧范围将需要存储在prevRange中，而makeEditableAndHighlight也可以获取可选参数oldRange（并且具有类似于“函数突出显示（color，oldRange）{”签名）之后的测试

无论我们是否有选择，都从页面中的所有文本中删除背景颜色

1 个答案: