javascript - 对 HTML 文本区域中的选择更改使用react

Question

我怎样才能获得 HTML textarea元素，回调其中编辑的文本的所有选择更改？
(我目前正在使用组合 keyup、keypress 和 mousemove(用于拖动选择端点)的技巧，也许可以添加更多，但这并不完全优雅。)
我在 HTML 文档或 StackOverflow 上找不到它。
通过“所有选择更改”，我的意思是包括使用鼠标选择期间的连续更改，并且我希望在选择折叠时以及只有一个插入符号被移动时获得回调(选择长度为零，但会发生变化) .我认为没有其他方法可以通过组合许多事件来实现这一点。甚至使用间隔回调并简单地比较，但这也不是很好。

Answer 1

您想要全局 selectionchange window 上提供事件或 document .阅读它here .
为您的 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 中的任何代码。功能。