JavaScript 中 selectionchange 怎么监听表单输入框内选中文本的变化-js教程-PHP中文网

selectionchange事件无法监听input/textarea选区变化，因其仅在document上触发且不冒泡，只适用于contenteditable元素；应使用select、focus、input等事件组合手动追踪selectionstart/selectionend。

javascript 中 selectionchange 怎么监听表单输入框内选中文本的变化

selectionchange 事件本身不能直接监听表单输入框（如 <input> 或 <textarea></textarea>）内选中文本的变化，因为它是一个**全局文档级事件**，且**不冒泡、不捕获，也不在 input/textarea 元素上触发**。它只在 document 上触发，且仅当当前焦点落在可编辑区域（如 contenteditable 元素或某些富文本编辑器）时才可靠响应。

为什么 input/textarea 上监听不到 selectionchange？

原生单行 <input type="text"> 和多行 <textarea></textarea> 虽支持选中文本，但它们不触发 document 的 selectionchange 事件（浏览器行为差异大，Chrome/Firefox 均不保证触发）。即使你给 document 添加监听，切换焦点或在 input 中拖选，也大概率收不到该事件。

正确监听 input/textarea 选区变化的方法

应结合以下事件手动追踪选区（selectionStart / selectionEnd）：

Java注释规范Skills

当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。

下载

focus：获取初始选区
select：用户用鼠标/快捷键完成一次选择后触发（最常用）
input：输入、删除、粘贴等导致内容或光标位置变化时触发（需配合防抖或对比）
mouseup 和 keyup：辅助判断鼠标释放或 Ctrl+A 等组合键场景

示例代码：

const el = document.querySelector('input, textarea');
let lastSelection = { start: 0, end: 0 };

const updateSelection = () => {
  const { selectionStart, selectionEnd } = el;
  if (selectionStart !== lastSelection.start || selectionEnd !== lastSelection.end) {
    console.log('选区变化：', { start: selectionStart, end: selectionEnd });
    lastSelection = { selectionStart, selectionEnd };
  }
};

el.addEventListener('select', updateSelection); // 主要靠这个
el.addEventListener('focus', updateSelection);
el.addEventListener('input', () => {
  // input 事件中选区可能未更新完毕，加微任务确保读取最新值
  Promise.resolve().then(updateSelection);
});
el.addEventListener('mouseup', updateSelection);
el.addEventListener('keyup', (e) => {
  if (e.ctrlKey && e.key === 'a') updateSelection(); // Ctrl+A 全选
});

注意边界情况

移动端触控选中（长按→拖动）可能只触发 select，不触发 mouseup
程序化设置 setSelectionRange() 不会触发 select，需手动调用 updateSelection()
快速连续操作（如双击词+拖选）可能导致多次 select，可加简单节流

如果必须用 selectionchange？

仅适用于 contenteditable="true" 的 div、p 等元素，且需确保它获得焦点：

const editable = document.querySelector('[contenteditable]');
document.addEventListener('selectionchange', () => {
  if (document.activeElement === editable) {
    const sel = window.getSelection();
    console.log('editable 内选区：', sel.toString(), sel.focusOffset);
  }
});

对普通表单控件，不要依赖 selectionchange —— 它不是为它们设计的。用 select + input + focus 组合才是稳定方案。