获取光标位置用selectionstart和selectionend属性，需先focus()再读取；设置光标须先focus()再调用setselectionrange()，注意异步时机及ime兼容性。
获取光标位置用 selectionStart 和 selectionEnd
这两个属性直接挂在 <input> 或 <textarea></textarea> DOM 元素上，返回当前选区起止索引（单位是 UTF-16 code units，对普通 ASCII 字符就是字符数）。光标未选中任何文本时，selectionStart === selectionEnd，值即为光标所在位置。
常见错误：在元素未 focus() 之前读取，某些浏览器（如旧版 Safari）可能返回 0 而非真实位置；更稳妥的做法是先 focus() 再读取，或监听 focus 事件后取值。
- 如果 input 初始无焦点，
selectionStart默认为0，哪怕 value 非空 - 用户手动拖选一段文字后失焦，
selectionStart和selectionEnd仍保留上次值，不会自动重置 - 中文、emoji 等多字节字符需注意：一个 emoji 可能占 2 个 code unit，
selectionStart值未必等于“视觉字符数”
设置光标必须先 focus()，再调用 setSelectionRange()
setSelectionRange() 不会自动聚焦元素，且在未聚焦状态下调用无效（多数浏览器静默忽略）。必须显式调用 focus()，且注意它的异步性——尤其在 React 等框架中，DOM 更新可能尚未完成。
正确写法示例：
const input = document.getElementById('myInput');
input.focus();
// 确保 focus 生效后再设位置
setTimeout(() => {
input.setSelectionRange(pos, pos);
}, 0);
- 参数
pos超出input.value.length时，浏览器会自动截断为最大合法值（即末尾） - 第三个可选参数
selectionDirection（"forward"/"backward"/"none"）影响方向感知，比如按住 Shift + ← 时的选区扩展方向，一般设默认值即可 - 在移动端 iOS Safari 中，
focus()可能被拦截（如非用户手势触发），此时setSelectionRange()会失败
把光标移到文本末尾的可靠写法
最常用场景：输入后自动跳到末尾、快捷键插入内容后光标跟在新字符后。直接用 value.length 是安全的，但要注意时机。
不要这样写：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
input.value += 'new'; input.setSelectionRange(input.value.length, input.value.length); // ❌ 可能因异步更新失效
推荐写法：
const input = document.getElementById('myInput');
const len = input.value.length;
input.focus();
setTimeout(() => {
input.setSelectionRange(len, len);
}, 0);
- 避免在
input或change事件回调里立即设位置，容易和浏览器默认行为冲突 - 若需插入文本并定位（如快捷键插入模板），应先拼接字符串，再一次性赋值
value，最后设光标，而不是用document.execCommand等过时 API - React/Vue 中，务必等 state 更新完成、DOM 渲染完毕后再操作，可用
useEffect的 cleanup 或nextTick钩子
兼容 IE9– 的 fallback 方案已基本可弃用
IE9– 不支持 setSelectionRange()，需用 createTextRange()。但截至 2026 年，全球 IE 使用率趋近于零，主流项目无需再兼容。
如果你真遇到必须支持的遗留系统，核心逻辑是：
if (input.setSelectionRange) {
input.setSelectionRange(pos, pos);
} else if (input.createTextRange) {
const range = input.createTextRange();
range.collapse(true);
range.moveStart('character', pos);
range.moveEnd('character', 0);
range.select();
}
注意：createTextRange 仅适用于 IE，现代浏览器调用会报 undefined is not a function 错误，务必加判断。
真正容易被忽略的是：光标位置在输入法（尤其是中文 IME）编辑过程中不可靠。用户正在打拼音时，selectionStart 可能指向拼音串内部，而非最终上屏文本位置。这类场景建议监听 compositionstart/compositionend 事件做隔离处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
