setSelectionRange 是原生 input 和 textarea 元素的方法，用于程序化设置光标位置或选中文本；仅在元素已聚焦、类型支持文本编辑（如 text、search、password）且未禁用/只读时可用，否则会报错或无效。
setSelectionRange 是什么，什么时候能用
它是一个原生 input 和 textarea 元素的方法，用于在输入框中程序化地选中一段文字。但必须满足两个前提：元素已聚焦（focus），且 类型支持文本编辑（比如 type="text"、type="search"、type="password" 等；type="number" 或 type="hidden" 就不支持）。
常见错误现象：Uncaught TypeError: input.setSelectionRange is not a function，基本就是类型不对或元素还没挂到 DOM 上就调用了。
怎么安全调用 setSelectionRange
不能直接写 input.setSelectionRange(2, 5) 就完事。得确保：元素存在、已渲染、已 focus、且不是禁用状态。
- 用
setTimeout或requestAnimationFrame延迟一小会儿，避开 Vue/React 的异步更新时机问题 - 手动调用
input.focus()，再立刻调用setSelectionRange - 加个 try/catch 防止某些浏览器（如旧版 Safari 对 password 类型）抛错
- 检查
input.disabled === false和input.readOnly === false，否则无效
示例：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
const input = document.querySelector('input');
if (input && input.select) {
input.focus();
// 确保 focus 完成后再设选区
setTimeout(() => {
try {
input.setSelectionRange(1, 4);
} catch (e) {
console.warn('setSelectionRange failed:', e);
}
}, 0);
}
start 和 end 参数的边界行为要注意
setSelectionRange(start, end) 中的 start 和 end 是 Unicode 码点索引（不是字节），但实际表现受输入法、代理对、组合字符影响。更关键的是它们的合法范围：
- 值必须是整数，负数会被截为 0
- 超过字符串长度时，会被自动截为
input.value.length -
start > end会反向选中（光标在前，选区向左延伸），部分浏览器支持，但行为不一致，建议始终保证start - 在中文输入法未上屏时调用，可能选中「输入法待确认区」，结果不可控 —— 这是普遍被忽略的坑
React/Vue 里容易出问题的时机点
框架的响应式更新和 DOM 同步有延迟，直接在 useEffect 或 mounted 里调用常失败，因为 input 可能还没真正渲染或 focus 权被抢走。
- React：推荐用
useRef+useEffect，但依赖项里加上input.value或加个isMounted标记，避免销毁后调用 - Vue：不要在
nextTick里就急着调setSelectionRange，最好嵌套一层setTimeout(..., 0)确保 focus 流程走完 - 如果 input 是受控组件（value 绑定 state），务必等 state 更新完成、DOM 渲染完毕再操作，否则
value长度和实际 DOM 不一致，选区偏移
最麻烦的其实是移动端 Safari：它在软键盘弹起过程中会重置 selection，哪怕你刚设好，下一帧就没了。这种场景只能监听 focus 事件反复尝试，或改用 input.select() 全选兜底。
