如何用JavaScript正确检测textarea的选区变化？

你之前的代码无法触发事件的原因是：selectionchange是文档级事件，只能绑定在document对象上，直接绑定到单个textarea元素不会生效。

下面提供两种可靠的解决方案：

方案1：监听文档级selectionchange事件并校验选区范围 #

监听整个文档的选区变化事件，每次触发时判断当前选区是否位于目标textarea内，符合条件则执行逻辑。

const textarea = document.getElementById('myTextarea');

document.addEventListener('selectionchange', () => {
  const selection = window.getSelection();
  // 验证选区的起始节点是否属于目标textarea
  if (textarea.contains(selection.anchorNode)) {
    console.log('textarea选区已变化:', {
      起始位置: textarea.selectionStart,
      结束位置: textarea.selectionEnd,
      选中文本: textarea.value.slice(textarea.selectionStart, textarea.selectionEnd)
    });
  }
});

方案2：绑定textarea的交互事件 #

针对鼠标选文本、键盘选文本等常见场景，直接在textarea上绑定对应的事件，每次交互后检查选区状态。

const textarea = document.getElementById('myTextarea');

function checkTextareaSelection() {
  console.log('textarea选区已变化:', {
    起始位置: textarea.selectionStart,
    结束位置: textarea.selectionEnd,
    选中文本: textarea.value.slice(textarea.selectionStart, textarea.selectionEnd)
  });
}

// 鼠标选文本后松开触发
textarea.addEventListener('mouseup', checkTextareaSelection);
// 键盘操作选区（shift+箭头、Ctrl+A等）触发
textarea.addEventListener('keyup', (e) => {
  const relevantKeys = ['Shift', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
  if (relevantKeys.includes(e.key) || (e.ctrlKey && e.key === 'a')) {
    checkTextareaSelection();
  }
});
// 点击textarea取消选区时触发
textarea.addEventListener('click', checkTextareaSelection);

方案对比 #

• 方案1能覆盖所有选区变化场景（包括右键选文本、拖拽选文本等），但需要额外校验选区归属；
• 方案2更轻量化，仅针对目标textarea的交互，但需要覆盖所有可能触发选区变化的操作。

内容的提问来源于stack exchange，提问作者user25148175