input.setselectionrange 是原生 input/textarea 设置光标或选区的方法，需满足已挂载、已 focus、type 支持文本编辑且未 disabled/readonly；常见报错因元素未渲染、type 不支持或未 focus；安全调用需 focus 后 settimeout 或 requestanimationframe 延迟执行并 try/catch；start/end 为 unicode 码点索引，受输入法待上屏状态影响大；全选优先用更鲁棒的 select()。
input.setSelectionRange 是什么，为什么直接调用常报错
setSelectionRange 是原生 input 和 textarea 元素的方法，用于程序化设置光标位置或选中文本范围。但它不是“写了就能用”的工具函数——必须同时满足：元素已挂载到 DOM、已 focus、type 支持文本编辑（如 text、search、password），且未被 disabled 或 readOnly 禁用。
常见错误：Uncaught TypeError: input.setSelectionRange is not a function，基本就三种情况：元素还没渲染出来（比如 Vue/React 中 ref 拿早了）、type="number" 这类不支持的类型、或者压根没调用 focus()。
如何安全调用 setSelectionRange(2, 5)
不能写完 input.focus() 就立刻跟 setSelectionRange——浏览器 focus 的完成是异步的，尤其在现代框架中更明显。稳妥做法是：
- 手动调用
input.focus()，再用setTimeout(() => { ... }, 0)或requestAnimationFrame延迟执行 - 加
try/catch，因为旧版 Safari 对type="password"调用该方法会抛错 - 显式检查状态：
if (!input.disabled && !input.readOnly) - 确保元素存在且非 null，避免
querySelector返回null后直接调用报错
示例片段：
const input = document.querySelector('input[type="text"]');<br>if (input) {<br> input.focus();<br> setTimeout(() => {<br> try {<br> input.setSelectionRange(2, 5);<br> } catch (e) {<br> console.warn('setSelectionRange failed:', e);<br> }<br> }, 0);<br>}
start 和 end 参数的边界行为和中文输入法陷阱
setSelectionRange(start, end) 的两个参数是 Unicode 码点索引（不是字节，也不是视觉字符数），但实际表现受代理对、组合字符、输入法状态影响极大。
关键细节：
- 负数会被截为 0；超过
input.value.length的值会被自动截断 -
start > end在部分浏览器中能反向选中（光标在前），但行为不一致，建议始终保证start - 最易被忽略的坑：在中文输入法「待上屏」状态下（即拼音已输、汉字还没点选确认），调用
setSelectionRange可能选中的是输入法的临时缓冲区内容，结果完全不可控——这个现象在 Chrome/Firefox/Safari 上均存在，且无跨浏览器修复方案
比 setSelectionRange 更简单的场景：全选用 select()
如果目标只是选中全部文本，input.select() 更轻量、兼容性更好，且不需要 focus 后再延迟——它内部已处理 focus 逻辑。但注意：select() 不接受参数，无法指定范围。
适用条件：
- 只要全选，不要控制起止位置
- 元素类型为
text、search、password、textarea（number、email等也支持） - 无需处理输入法待上屏状态——
select()在输入法激活时仍能选中已提交的文本，比setSelectionRange更稳定
一句话收尾：真要精确控制选区，setSelectionRange 是唯一选择，但必须绕开聚焦时机、输入法缓冲、类型限制这三道坎；而多数“点击后高亮内容”的需求，select() 才是更鲁棒的解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
