在文本突出显示事件中？

IT技术 javascript firefox-addon dom-events
2021-01-27 09:56:47

我很好奇是否有人知道如果/一旦用户完成在网页上选择文本，我将如何触发函数运行？我希望用户能够选择文本，并在短暂延迟（或立即，此时无关紧要）后，在用户可以单击的文本附近出现一个覆盖按钮，然后我返回并运行更多基于选择的代码。这是用于 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;

所以这就是我使用罗伯特的建议提出的，我花了一些时间把所有东西都放在正确的位置，但效果很好！现在来定位我的按钮。

6个回答

没有任何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]

无论你想监视什么，如果你想监视整个窗口，使用 window.onmouseup
2021-03-14 09:56:47
我将如何分配给哪些对象“onmouseup”？类似的东西，window.onmouseup = myFunction(); ?
2021-03-19 09:56:47
@Marcel Korpel：在某种textarea或input，是的，但您可以将onselect事件用于那些。
2021-04-03 09:56:47
@Robert，太棒了，这听起来真的很好用！我将尝试实施它，并最终将在今天晚些时候标记为已回答，早期 tmrw。谢谢！@Marcel 我不确定我是否需要它，所以这应该很好用。谢谢你的提醒！
2021-04-04 09:56:47
这种方法的一个缺点是当用户使用键盘（Shift+→ 等）选择文本时它不起作用。
2021-04-06 09:56:47

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

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

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

我实际上认为监听 mouseup 事件比 selectionchange 更好，因为后者触发了这么多事件（直到选择的字符），您必须等待一些任意时间才能获得最终选择。
2021-03-31 09:56:47

聚会有点晚了，但以备将来参考......

看看MDN上的selectDOM 事件。

一旦释放鼠标或键，它就会触发（至少在 Chrome 40 中）。

document.addEventListener('select', callback);

这是一个不错的事件，但它只适用于文本输入和文本区域，对吗？
2021-03-24 09:56:47

我建议收听 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>

我认为@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?

这很棒！我们如何让它只在特定元素内完成？
2021-03-30 09:56:47
其它你可能感兴趣的问题
上一篇如何在 JavaScript 中从 Chrome 的控制台读取 下一篇Javascript格式日期/时间