setselectionrange在input上失效的主因是元素未聚焦或未渲染完成，需先focus再调用，避开display:none等隐藏状态，并注意type兼容性、参数边界及ios失焦问题。
setSelectionRange 在 input 上不起作用的常见原因
调用 setSelectionRange 后没选中任何文本，大概率是元素还没获得焦点或尚未渲染完成。这个方法只对聚焦状态下的可编辑元素生效，且不能在 display: none、visibility: hidden 或未插入 DOM 的元素上调用。
- 必须先调用
input.focus()，再调用setSelectionRange(start, end) - 如果是在组件挂载初期（比如 React 的
useEffect或 Vue 的mounted）操作，建议加个setTimeout(..., 0)或使用requestAnimationFrame延迟到下一轮渲染 -
type="number"、type="email"等部分类型不支持选中文本（浏览器行为不一致），优先用type="text"
正确设置 start 和 end 参数的边界规则
start 和 end 是字符索引位置，从 0 开始计数，但它们不是无约束的：超出字符串长度会被截断，负数会被当作 0 处理，且 start > end 会导致光标定位在 start 而不选中内容（即“反向选中”被忽略）。
- 若想全选，用
input.setSelectionRange(0, input.value.length) - 若
start = end，只移动光标，不选中任何字符 - 若
end > input.value.length，浏览器自动按input.value.length处理，不会报错 - 注意：中文、emoji、代理对（如 ?）都算作单个字符索引，和
String.prototype.length一致
兼容性与移动端特殊处理
桌面 Chrome/Firefox/Safari 均支持，但 iOS Safari 在某些版本中对 input 元素调用 setSelectionRange 后可能立即失焦，导致视觉上看不到选中效果。
- iOS 上建议在
focus事件回调中调用setSelectionRange，而不是在click或tap中直接调用 - Android WebView 旧版本（Chrome setSelectionRange，需降级为
select()（全选）作为 fallback - 部分输入法（如搜狗、百度）在聚焦后会接管光标控制，此时
setSelectionRange可能被覆盖，建议延迟 100ms 再执行
一个防错的封装示例
避免每次手动判断焦点和延时，可以封装一个健壮的选中函数：
function selectText(input, start, end) {
if (!input || !input.focus || !input.setSelectionRange) return;
input.focus();
// 防 iOS 失焦
setTimeout(() => {
const len = input.value.length;
const safeStart = Math.max(0, Math.min(start, len));
const safeEnd = Math.max(safeStart, Math.min(end, len));
input.setSelectionRange(safeStart, safeEnd);
}, 0);
}
调用时直接传入目标范围即可：selectText(myInput, 2, 5)。注意它不处理 disabled/readonly 状态 —— 这些状态下 setSelectionRange 本身就会静默失败。
最常被忽略的是：哪怕代码逻辑完全正确，只要元素没真正出现在视口里（比如在折叠面板内、tab 页未激活），iOS 就可能拒绝执行选中。这时候得配合 scrollIntoView 和状态同步来兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
