TextArea选择更改？

Question

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

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

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

编辑：“所有选择更改”是指包括在使用鼠标进行选择期间的连续更改，并且当选择折叠且移动的插入记号时（选择长度为零，但我想获得回调）变化）。我认为没有其他方法可以通过组合许多事件来实现。甚至使用间隔回调并仅进行比较，但这也不是很好。

Answer 1

您想要的是或selectionchange上可用的全局事件。在这里阅读。windowdocument

为你的 textarea 添加一个唯一的 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函数中的任何代码。