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上的select DOM事件。

释放鼠标或键后会触发（至少在Chrome 40中）。

document.addEventListener('select', callback);

Answer 3

有一个本地事件，用于进行文本选择/更改。 selectionchange具有basic support on most browsers, including IE，并且不仅适用于表单元素，而且适用于文档中的任何文本。

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

select this text

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

Answer 4

我建议您听mouseup事件而不是selectionchange，因为后者会触发很多事件（取决于选定的字符），您必须等待任意时间才能获得最终选择。同上@Robert和@Makyen，我已经创建了一些代码供您播放：

<!DOCTYPE html>
<html>
<body>
  <div onmouseup="showSelection()">
    <p>Select some of the text. You can also listen to the mouseup event at the &lt;p&gt; level</p>
    <p>Anthoer paragraph and text</p>
    <input type="text" value="Hello world!" onselect="showSelection()">
  </div>
  Outside of div, selection won't work as there is no listener if you don't uncomment the line: document.onmouseup = showSelection
  
  <script>
  // document.onmouseup = showSelection // listen to the mouseup event at document level
  
  function showSelection() {
    console.log('Selection object:', window.getSelection()) // same as document.getSelection()
    console.log('Selected text:', window.getSelection().toString())
  }
  </script>
</body>
</html>

Answer 5

使用mouseup技巧的解决方案不是正确的解决方案。这是一种hacky方式，并不完美。效率也不高，因为你现在正在捕捉如此多的垃圾。

在Firefox插件中执行此操作的真正方法是使用addSelectionListener查看此主题：Observe for highlight?

现在，即使用户使用键盘进行选择，也会被捕获。

感谢Neil让我知道在MXR上找到它的地方

Answer 6

只需处理鼠标事件，因为用户在突出显示后会“松开”键：

香草JS

//Directly within element
<p class='my_class' onmousedown="my_down_function()" onmouseup="my_up_function()">

//On element
my_element = document.querySelector('.my_class');
my_element.onmousedown = function (e) { my_down_function(e); };
my_element.onmouseup function (e) { my_up_function(e); };

jQuery

$('.my_class').mousedown(function() {
    my_down_function()
})
$('.my_class').mouseup(function() {
    my_up_function()
})

Azle

az.add_event('my_class', 1, {
    "type" : "mousedown",
    "function" : "my_down_function()"
})
az.add_event('my_class', 1, {
    "type" : "mouseup",
    "function" : "my_up_function()"
})

Answer 7

我认为@ patrick-evans的回答正确。这很容易成为最due to misunderstandings of how var-arg methods in Java work的答案-您只需对事件进行反跳即可阻止洪水泛滥。

我无法发布回复，但请考虑此

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 8

您可以为此使用选择更改事件

    document.addEventListener('selectionchange', (e)=>{
        console.log("Archor node - ",window.getSelection().toString());
    });

在文字突出显示事件？

8 个答案:

修改