TextArea 选择更改？答案

【问题标题】：TextArea Selection Change?TextArea 选择更改？
【发布时间】：2017-10-09 16:58:48
【问题描述】：

对于 HTML TextArea 元素，如何在对其中编辑的文本的所有选择更改时回调？

（我目前正在使用组合 keyup、keypress 和 mousemove（用于拖动选择端点）的技巧，也许可以添加更多，但这并不完全优雅。）

在 HTML 文档或 SO 上找不到它。

编辑：通过“所有选择更改”，我的意思是包括使用鼠标选择期间的连续更改，并且我希望在选择折叠并且只有一个插入符号被移动时获得回调（选择为零长度，但会发生变化）。我认为没有其他方法可以通过组合许多事件来实现这一点。甚至使用间隔回调并简单地比较，但也不是很好。

【问题讨论】：

标签： javascript html events textarea selection

【解决方案1】：

您想要的是window 或document 上可用的全局selectionchange 事件。阅读它here。

为您的文本区域添加一个唯一的 id：

<textarea id="unique-id"></textarea>

向文档添加事件监听器：

function handleSelection() {
  const activeElement = document.activeElement

  // make sure this is your textarea
  if (activeElement && activeElement.id === 'unique-id') {
    const range = {
      start: activeElement.selectionStart,
      end: activeElement.selectionEnd
    }
    // do something with your range
  }
}

document.addEventListener('selectionchange', handleSelection)

这将运行handleSelection 函数中的任何代码。

【讨论】：

听起来很有希望！将测试并返回。
在 Chrome 中工作，看来我需要在窗口对象上添加事件侦听器，而不是文档。谢谢！（顺便说一句，建议的链接修复。）
你知道吗，Chrome 中似乎有一两个错误。我发现了一些似乎不会触发选择更改事件的事情：1）退格（空选择或折叠），2）折叠撤消或重做。不过在 Safari 中没有问题。

【解决方案2】：

您可以使用onselect 事件

object.addEventListener("select", myScript);

https://www.w3schools.com/jsref/event_onselect.asp

【讨论】：

是的，但这只是部分原因：AFAICT 在鼠标拖动过程中不会更改选择，只有在完成选择或鼠标向上时才会更改，并且在选择折叠时不会被回调。（也许我应该编辑问题以澄清。）