在文字突出显示事件？

Question

我很好奇是否有人知道如果/当用户完成在网页上选择文本后我将如何触发函数运行？我希望用户能够选择文本,并在短暂的延迟(或立即,此时无关紧要)后,文本附近会出现一个覆盖按钮,然后用户可以单击该按钮然后返回并运行我的更多代码基于选择.这适用于Firefox扩展.

我能想到的一个类似的例子就像在IE中你可以选择文本然后它会带来"网络加速器".我99%肯定我知道如何实际覆盖按钮,并获得所选文本的位置,但我不知道如何检查是否有任何选择,没有做某种无限循环,看起来似乎是个糟糕的主意.

提前致谢!

编辑:

//In my overlay.js with the rest of my sidebar code
isTextSelected: function () {   
        var myText = cqsearch.getSelectedText();
        var sidebar = document.getElementById("sidebar");
        var sidebarDoc = sidebar.contentDocument || document;

        var curHighlightedDiv = sidebarDoc.getElementById("testDiv");
        curHighlightedDiv.innerHTML = "Current text selection:" + myText;
    }
};

//In my on firefox load function I added this
document.onmouseup = cqsearch.isTextSelected;

所以这就是我用罗伯特提出的建议,我花了一些时间把所有东西都放在正确的位置,但效果很好!现在来定位我的按钮.万分感谢!

Answer 1

没有任何onhighlightext或类似的东西,但解决方案是绑定onmouseup以检查是否选择了任何文本,如果它不在input/中textarea.

编辑

这是一个实现示例.我只在Chrome/Firefox/IE7中测试过这个.这也适用于输入.

http://jsfiddle.net/qY7gE/

来自JSFiddle的代码:

var t = '';
function gText(e) {
    t = (document.all) ? document.selection.createRange().text : document.getSelection();

    document.getElementById('input').value = t;
}

document.onmouseup = gText;
if (!document.all) document.captureEvents(Event.MOUSEUP);

<input type='text' id='input' />
In software, a stack overflow occurs when too much memory is used on the call stack. The call stack contains a limited amount of memory, often determined at the start of the program. The size of the call stack depends on many factors, including the programming language, machine architecture, multi-threading, and amount of available memory. When too much memory is used on the call stack the stack is said to overflow, typically resulting in a program crash.[1] This class of software bug is usually caused by one of two types of programming errors.[2]

Answer 2

派对有点晚,但供将来参考......

看看MDN上的selectDOM事件.

一旦释放鼠标或键,它就会触发(至少在Chrome 40中).

document.addEventListener('select', callback);

Answer 3

我认为@patrick-evans 给出了正确的答案。这无疑是最具前瞻性和 API 支持的答案——您只需要消除事件的反跳即可阻止洪水泛滥。

我无法发表回复，但请考虑一下

function debounce(fn, delay) {
  let timer = null;
  return function () {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
};

document.addEventListener("selectionchange", debounce(function (event) {
  let selection = document.getSelection ? document.getSelection().toString() :  document.selection.createRange().toString() ;
  console.log(selection);
}, 250));

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad est veniam facere culpa expedita optio iste labore doloremque autem illo, in voluptatibus error ea, ab reprehenderit placeat facilis animi iure?

Answer 4

进行/更改文本选择时有一个本机事件。在包括IE在内的大多数浏览器上selectionchange都有基本的支持，并且不仅适用于表单元素，而且适用于文档中的任何文本。

document.addEventListener("selectionchange",event=>{
  let selection = document.getSelection ? document.getSelection().toString() :  document.selection.createRange().toString() ;
  console.log(selection);
})

select this text

注意，顾名思义，它会在选择的任何更改时触发。因此，在选择文本时，您将获得对回调函数的多次调用。