select()在focus事件中直接调用常无效，因浏览器焦点切换未完成；应改用requestanimationframe或settimeout延迟执行，并确保元素可见、可编辑且类型支持。
select() 方法在 focus 事件中直接调用通常无效——不是写法错，而是浏览器焦点切换未完成就执行了选中逻辑，导致静默失败。
为什么 onfocus="this.select()" 经常不生效
内联 onfocus 调用 this.select() 看似简洁，但实际触发时机早于浏览器完成焦点接管。尤其在以下场景必败：
-
input初始为display: none或父容器有visibility: hidden，元素不可见时select()无反应 - 元素被设为
readonly或disabled，方法调用不报错但也不起作用 - 移动端软键盘弹出延迟，
focus触发后 DOM 尚未稳定，select()被忽略 -
type="number"、type="date"等非文本类型，原生不支持select()
安全调用 select() 的最小可行方案
绕过时机问题最轻量的做法是加一层异步调度，让浏览器先完成焦点迁移：
input.addEventListener('focus', () => {
setTimeout(() => input.select(), 0);
});
比 setTimeout(0) 更稳的是 requestAnimationFrame，它确保在下一帧重绘前执行：
input.addEventListener('focus', () => {
requestAnimationFrame(() => input.select());
});
注意：必须保证 input 已挂载、可见、可编辑；否则仍会失败，且不抛异常。
type="number" 等不支持 select() 的替代方案
type="number"、type="range"、type="color" 等控件无法调用 select()，此时需退回到 setSelectionRange() 手动控制光标位置：
input.addEventListener('focus', () => {
requestAnimationFrame(() => {
try {
input.setSelectionRange(0, input.value.length);
} catch (e) {
// 某些旧 Safari 对 password 类型可能 throw，忽略即可
}
});
});
关键点：
-
setSelectionRange()要求元素已focus()，所以必须先确保聚焦成功 -
start和end参数超出value.length会被自动截断，传(0, 999)是安全的 - 对
type="password"，部分浏览器限制setSelectionRange()行为，但现代 Chrome/Firefox 均支持
Vue/React 中容易忽略的 DOM 同步陷阱
框架里不能依赖 $event.target 或 useRef.current 在事件回调中立刻操作，因为 ref 可能还没绑定或 DOM 尚未更新：
- Vue 2/3：必须用
nextTick（或onMounted + setTimeout）等待渲染完成 - React：
useEffect依赖数组不能为空（除非确定只初始化一次），否则组件更新后 ref 可能失效 - 别在
onChange或表单提交后调用select()，此时输入框很可能已失焦或值被重置
真正可靠的模式是：显式 focus() → 等待一帧 → 再 select() 或 setSelectionRange()。任何跳过“等待”环节的写法，在复杂生命周期下都大概率失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
