文本框选区变化应使用select事件配合selectionStart/selectionEnd属性，或组合监听mouseup、keyup等事件统一处理；selectionchange事件无法直接绑定到input/textarea元素。
selectionchange 事件本身不能直接监听文本框（如 或 ）内的选区变化，因为它的设计目标是监听整个文档级别的选中状态变更，且不冒泡、不委托、也不能绑定到普通元素或表单控件上。
但你真正需要的，其实是“在文本框中精准响应光标移动或选区变化”，这要分两种情况处理：
✅ 文本框内选区变化的正确监听方式
和 是特殊可编辑元素，它们原生支持 select 事件，且提供精确的选区位置信息：
-
select事件：在用户完成一次选中操作后触发（如鼠标释放、Shift+方向键结束），只对表单元素有效。 - 同时可配合
selectionStart/selectionEnd属性获取光标位置或选中文本范围。
const input = document.querySelector('input, textarea');
input.addEventListener('select', () => {
const { selectionStart, selectionEnd, value } = input;
const selectedText = value.slice(selectionStart, selectionEnd);
console.log('选中内容:', selectedText);
console.log('起始位置:', selectionStart, '结束位置:', selectionEnd);
});
⚠️ 注意：
select不会在每次光标移动时触发（比如单纯用方向键移动光标不选中），它只在“选区实际发生变化并确认”后触发一次。
✅ 如需更细粒度响应（包括光标移动、键盘微调、程序调用 .select() 等）
可组合监听以下事件，统一用 getSelection() + 元素聚焦状态判断：
function handleSelectionInInput() {
// 只有当 input/textarea 获焦时，才读取其内部选区
const activeEl = document.activeElement;
if (activeEl && ['INPUT', 'TEXTAREA'].includes(activeEl.tagName)) {
const { selectionStart, selectionEnd, value } = activeEl;
return value.slice(selectionStart, selectionEnd);
}
return '';
}
// 绑定多个事件兜底
['mouseup', 'keyup', 'focus', 'input', 'touchend'].forEach(evt => {
document.addEventListener(evt, () => {
const text = handleSelectionInInput();
if (text) console.log('当前输入框选中:', text);
});
});
✅ 这样能覆盖：鼠标拖选、Shift+→扩展、双击词、点击后键盘调整、甚至 JS 调用
el.select()的场景。
❌ 不要这样做（常见误区）
-
input.addEventListener('selectionchange', ...)→ 无效，该事件无法绑定到 input 元素。 -
document.addEventListener('selectionchange', ...)→ 它会触发，但此时window.getSelection()在 input 聚焦时可能返回空或跨元素干扰结果（尤其移动端 WebView 表现不稳定）。
? 额外建议：兼容性与稳定性
-
selectionStart/selectionEnd在所有现代浏览器中稳定支持（包括 iOS Safari）。 - 若需监听非表单区域（如
contenteditablediv） 的选区，才应回到selectionchange + getSelection()方案，并检查rangeCount > 0和toString().trim()。 - 对于
contenteditable，还可监听selectstart（可阻止选中）或beforeinput（编辑前拦截）做增强控制。
不复杂但容易忽略。
