selectionStart/selectionEnd 仅在 type="text"、"search"、"url"、"email" 和 textarea 上可靠；type="password" 多数返回0，type="number"等受限类型基本不可用；input事件中需setTimeout延迟读取；设置光标必须用setSelectionRange()。
selectionStart/selectionEnd 在哪些 input 类型上能用
只在 type="text"、type="search"、type="url"、type="email" 和 textarea 上可靠；对 type="password" 多数浏览器返回 0 或不更新，type="number"、type="date" 等受限类型基本不可用。
常见错误现象：读到 selectionStart 始终为 0，但输入框明明有内容且已聚焦 —— 很可能是因为用了 type="number"，浏览器压根不维护文本光标状态。
- 判断依据不是“有没有值”，而是元素的
type属性和是否可编辑 -
disabled或readonly为true时，属性仍可读，但值无意义（通常为 0） - 隐藏元素（
display: none）或未挂载 DOM 时，读取结果不可靠，甚至抛错
为什么在 input 事件里直接读是错的
input 事件触发时，selectionStart 和 selectionEnd 还没更新 —— 它反映的是事件开始前的状态。比如用户按 Backspace 删除一个字符，input 触发时 selectionStart 仍是删除前的位置。
这不是浏览器 bug，而是规范行为：DOM 属性更新滞后于事件调度。
- 最轻量解法：
setTimeout(() => { /* 读取 */ }, 0)，延迟到本轮事件循环末尾 -
select事件只响应鼠标选中，漏掉键盘操作（如 Shift+→），不推荐单独依赖 - 不要用
requestAnimationFrame替代setTimeout，它在某些快速连续输入场景下反而更慢
设置光标位置必须用 setSelectionRange()
不能直接赋值 el.selectionStart = 5，尤其在 input 元素上 —— Chrome/Firefox 虽然允许，但行为不稳定；IE 完全不支持，Safari 在某些版本会静默失败。
唯一跨浏览器可靠的写法是调用 el.setSelectionRange(start, end)，且必须确保元素已 focus()。
- 设置光标（无选区）：
el.setSelectionRange(pos, pos) - 选中一段文本：
el.setSelectionRange(2, 6) - 第三个参数
direction（可选）用于指定选区方向，如"forward"或"backward"，多数场景不用管 - 如果
start > end，浏览器会自动交换并设为start === end
中文输入法（IME）下光标位置不准怎么办
用户正在打拼音但还没上屏（比如敲完 “zhong” 没按空格），此时 selectionStart 会冻结在上一次确认后的位置，不会随拼音组合变化 —— 这是所有现代浏览器的统一行为，不是你代码的问题。
这意味着：任何基于实时光标位置的插入、高亮或替换逻辑，在 IME 组合期都会失效。
- 无法绕过，只能规避：检测
compositionstart/compositionend事件，在组合期间暂停光标相关操作 - 不要试图用
input事件 +setTimeout强行读取，组合期内读到的仍是旧值 - Vue/React 中尤其要注意：
v-model或value更新可能早于 IME 确认，导致 DOM 值与光标位置错位
实际中最容易被忽略的点不是 API 怎么写，而是「什么时候不该信它」—— 比如 IME 组合期、非文本 type、隐藏元素、未 focus 状态。这些边界条件不处理，功能在 90% 场景下看似正常，剩下 10% 却完全失灵。
