1

我们有以下 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');
    }
  );
}

这仅在我选择相同的文本并单击文档中的任意位置时才有效。

我希望它的工作方式是能够单击文档中的任何位置，并将任何突出显示的文本设置回原始文本（或者如果原始文本不可能，则为透明）。

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

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

如果存在选择并且按下按钮 > 突出显示选择并自动删除所有选择。

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

同样，直到最后一部分，即“删除任何突出显示”部分，这段代码似乎都运行良好。

4

1 回答 1

0

您可以替换从正文中突出显示的调用，以具有一个额外的参数 prevRange ，它是一个全局参数。然后在调用后将 prevRange 重置为未定义。

highlight 的签名可以是

功能突出显示（颜色，旧范围）{

然后开始 

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 （并且有一个类似于 "function highlight(color, oldRange) {" 签名之后的测试）

于 2013-08-19T00:05:08.703 回答