setSelectionRange仅适用于text、search、url、tel、password类input及textarea；number等类型会抛InvalidStateError；需确保元素已聚焦、可见且DOM已渲染，否则静默失败或无效。
setSelectionRange 是唯一可靠的方式，但必须确保元素已聚焦、可编辑、且类型受支持——否则调用会静默失败或抛 InvalidStateError。
哪些表单元素能用 setSelectionRange
只适用于以下 <input> 类型： text、search、url、tel、password。
number、email、date、file 等类型不支持，调用会直接报错 InvalidStateError。
<textarea> 完全支持，行为与 text 输入框一致。
- 判断方式：检查
element.type是否在白名单内，而不是看有没有value属性 - 移动端 Safari 对
number类型的处理更严格，哪怕加了inputmode="numeric"也不行 - 如果不确定类型，先用
element.focus()再尝试，避免因未聚焦导致的无效调用
为什么调用了 setSelectionRange 却没反应
最常见原因是执行时机不对：DOM 尚未渲染完成、元素被隐藏、或框架（如 React）尚未提交更新。
-
display: none或visibility: hidden时，focus()会被浏览器忽略，后续setSelectionRange无效 - 在 Vue 的
nextTick或 React 的useEffect中调用，比直接写在事件回调里更稳妥 - 动态插入的模态框（如登录弹窗），不能依赖
autofocus，必须显式.focus()+setSelectionRange，且建议加setTimeout(..., 0)微任务兜底 - Chrome 120+ 对快速连续 focus/setSelectionRange 有节流，中间加
await new Promise(r => setTimeout(r, 0))可缓解
selectionStart 和 setSelectionRange 选哪个
二者功能等价，但行为细节不同：selectionStart 是可读写属性，setSelectionRange 是方法，带额外控制能力。
- 设光标到末尾时，
el.selectionStart = el.value.length更简洁；但想兼容 IE9–10？只能用setSelectionRange -
setSelectionRange(start, end, direction)第三个参数direction（"forward"/"backward"/"none"）能控制光标移动方向，比如回车后希望光标往右跳而非左跳 - 如果要选中文本（非单纯定位），必须用
setSelectionRange，因为赋值selectionStart/selectionEnd不触发浏览器选区重绘 - React 中直接改
selectionStart可能被下一次 render 覆盖，优先封装成 effect 里调用setSelectionRange
真正容易被忽略的是 contenteditable 元素——它根本不认 setSelectionRange，得用 Range + Selection API。别把 textarea 的逻辑套过去，那是两个世界。
立即学习“前端免费学习笔记（深入）”；
