setselectionrange 调用前必须确保 input 已 focus 且可编辑，否则几乎总失败；安全做法是先 focus() 再 queuemicrotask 调用；需注意 type="text" 无换行概念、中文/emoji 长度陷阱、输入法期间禁用及移动端 password 兼容性问题。
setSelectionRange 调用前必须确保 input 已 focus 且可编辑
直接 input.setSelectionRange(0, 0) 几乎总是失败——因为浏览器内部焦点状态还没就绪。尤其在 React/Vue 中，useEffect 或 mounted 阶段 DOM 可能刚挂载、但 focus 尚未完成，此时调用会静默失效或抛 TypeError。
安全做法是：先显式调用 input.focus()，再用异步时机触发 setSelectionRange：
- 推荐用
queueMicrotask(() => input.setSelectionRange(0, 0))（比setTimeout(..., 0)更精准） - 若需兼容旧版 Safari（setTimeout(..., 0) 并加
try/catch - 务必检查
input.disabled === false且input.readOnly === false，否则无效
start 和 end 传 0,0 是最稳妥的“光标定位到开头”写法
input.setSelectionRange(0, 0) 表示不选中任何字符，仅将光标置于索引 0 处。它比 input.select() 更可控，后者会全选内容、干扰用户预期。
注意边界行为：
- 负数参数（如
-1）在部分旧浏览器（Chrome 0，行为不可靠 -
start > end（如(3, 1)）虽在某些浏览器支持反向选中，但移动端表现不一致，应避免 - 中文输入法「上屏前」状态下调用，可能把光标卡在输入法待确认区，导致位置错乱
type="text" 没有“第一行”概念，别被误导
input[type="text"] 是单行控件，不存在换行符，所谓“定位到第一行”纯属冗余表述。它的光标逻辑就是字符串索引——setSelectionRange(0, 0) 就是开头，setSelectionRange(input.value.length, input.value.length) 就是末尾。
如果你发现聚焦后光标总在末尾，大概率是以下原因：
- JS 赋值后没重置光标：
input.value = 'xxx'会把光标自动推到末尾，必须手动补setSelectionRange(0, 0) - 误用了
input.select()，它默认全选，光标落在末尾 - 框架里用了
v-model或valueprop 更新，但没同步处理光标
textarea 和 input 的行为差异不能忽略
textarea 支持多行，setSelectionRange 的索引是按 Unicode 码点计算的，遇到 emoji 或组合字符（如带声调的汉字）时，input.value.length 可能 ≠ 实际可视字符数。而 input[type="text"] 同样适用该规则，但因无换行符，影响较小。
实际开发中容易踩的坑：
- 用
.length计算中文/emoji 字符起始位置，结果偏移（例如 ?? + 文字，'??a'.length === 3，但视觉上只有两个“字符”） - 在 CompositionEvent（如
compositionstart）期间调用setSelectionRange，会导致输入法中断或光标跳变 - 移动端 Safari 对
password类型的setSelectionRange支持极差，建议禁用该场景下的光标控制
setSelectionRange 就只是个摆设。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
