textarea中selectionstart/end仅在源码模式（原生控件）下可用且可读写；contenteditable需用getselection+range；input事件中须用settimeout延迟获取真实光标位置；设置光标必须调用setselectionrange()；其值为utf-16索引，非字符数。
selectionStart 在 textarea 源码模式下才真正可用
HTML 编辑器切换到「源码模式」时，绝大多数实现会隐藏富文本区域（contenteditable），改用 textarea 或 input[type="text"] 呈现原始 HTML 字符串。只有在这类原生表单控件中，selectionStart 和 selectionEnd 才是可读写、行为一致的。而 contenteditable 元素不支持这两个属性（哪怕加了 spellcheck="false" 也没用），强行访问会返回 0 或抛错。
所以第一步必须确认当前 DOM 节点类型：
– 如果是 textarea：放心用 selectionStart
– 如果是 div[contenteditable="true"]：立刻切到 window.getSelection() + Range 方案，别碰 selectionStart
input 事件里读不到最新光标位置？用 setTimeout 延迟取值
在源码模式下监听 input 事件时，el.selectionStart 返回的是触发前的位置——比如用户按了右箭头，input 触发时 selectionStart 还卡在旧索引，不是移动后的新位置。这是浏览器规范行为，不是 bug。
正确做法是把读取逻辑包进微任务：
sourceTextarea.addEventListener('input', () => {
setTimeout(() => {
const pos = {
start: sourceTextarea.selectionStart,
end: sourceTextarea.selectionEnd
};
console.log('真实光标位置', pos);
}, 0);
});
注意：
– 不要用 requestAnimationFrame，它比 input 事件还慢一帧，可能错过连续输入
– 不要依赖 keyup，它不捕获粘贴、拖拽插入等操作
– IE9+ 兼容性没问题，setTimeout(, 0) 是最稳的兜底方案
一款AI工具，主要用于自动分析崩溃并修复错误。监控 Cloudflare D1 崩溃报告，进行去重和 Codex 5.3 High 分析，生成修复并创建...，适合需要提升相关任务效率的用户。
设置光标位置必须调用 setSelectionRange()，不能直接赋值
很多人写 el.selectionStart = 10，发现没反应——因为该属性是只读的（部分浏览器允许写但无效）。真正生效的只有 el.setSelectionRange(start, end, direction?)。
常见误操作和对应解法：
- 想把光标移到末尾 →
el.setSelectionRange(el.value.length, el.value.length) - 想选中第 5 到第 12 个字符 →
el.setSelectionRange(5, 12) - 光标移入后立即聚焦（尤其从预览区切回源码）→ 必须先
el.focus()，再调setSelectionRange()，否则无效 - 在
DOMContentLoaded里初始化光标 → 确保元素已挂载且非display: none，否则setSelectionRange静默失败
处理换行、Emoji、代理对时，selectionStart 是 UTF-16 索引，不是字符数
selectionStart 的单位是 UTF-16 code units，不是 JavaScript 中的 .length 字符数（后者对 emoji 或中文基本一致，但遇到 ??、?? 这类组合序列就翻车）。例如：
const str = 'a?b'; // '?' 是一个 Unicode 码点，占 2 个 UTF-16 单元 console.log(str.length); // → 3 console.log([...str].length); // → 3（扩展运算符按字符拆） // 但 textarea.selectionStart 会返回 2（'a' + '?' 的前半单元）
这意味着：
– 用 substring() 截取内容时，直接传 selectionStart 是安全的
– 但若你想“向左移动一个字符”，不能简单 pos - 1，得用 Array.from(value).slice(0, pos).length 反向映射
– 处理用户编辑逻辑（如光标左右键）时，优先用 setSelectionRange() 配合 Array.from() 计算边界，别硬算索引
真正容易被忽略的是：源码模式下，用户可能粘贴带缩进的 HTML 片段或内联 script 标签，这些内容里的换行符（\r\n 或 \n）在不同系统下长度不一，selectionStart 会如实反映其 UTF-16 占位——调试时用 console.log(JSON.stringify(value)) 查看真实字符串结构，比肉眼数字符靠谱得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
