input元素focus后需延迟执行select()才能全选文本，推荐用setTimeout(0)或requestAnimationFrame；type="number"等类型不支持select()，可改用setSelectionRange(0, value.length)。
input元素focus后怎么立刻选中全部文本
直接调用 select() 方法就行，但必须等元素获得焦点（focus）后再执行，否则在多数浏览器里无效。
常见错误是：给 <input> 绑定 click 或 focus 事件后立刻调用 select()，结果没反应——因为 DOM 还没完成焦点切换，浏览器会静默忽略。
- 正确做法是用
setTimeout延迟一帧（0毫秒），让 focus 完成后再选中：input.addEventListener('focus', () => { setTimeout(() => input.select(), 0); }); - 更稳妥的写法是监听
focusin事件（冒泡版 focus），再配合requestAnimationFrame，兼容性更好 - 注意：如果 input 是
type="number"或type="date"，select()会被浏览器禁用，直接无效
Vue/React里怎么让输入框自动全选
框架里不能只靠原生 focus 时机，得结合生命周期或 ref 状态来控制。
Vue 中用 nextTick（或 onMounted + setTimeout）确保 DOM 渲染完成；React 中用 useEffect + ref，且必须加依赖数组防止重复触发。
立即学习“前端免费学习笔记（深入）”；
- Vue 3 示例：
const inputRef = ref(); onMounted(() => { nextTick(() => { inputRef.value?.focus(); setTimeout(() => inputRef.value?.select(), 0); }); }); - React 示例：
useEffect(() => { if (inputRef.current) { inputRef.current.focus(); setTimeout(() => inputRef.current?.select(), 0); } }, []); // 注意空依赖数组 - 别在
onChange或表单提交后立刻调用select()，此时 input 可能已失焦或被重置
select()不生效的三个典型原因
不是代码写错了，而是被浏览器策略或 DOM 状态拦住了。
-
display: none或visibility: hidden的元素调用select()无效；得确保元素已渲染且可见 - 元素没有获得焦点（
focus()没成功），比如被tabindex="-1"或父级pointer-events: none阻断 - 用户手势上下文缺失：Chrome 95+ 要求
select()必须由用户操作（如 click、keydown）触发，纯 JS 定时调用可能被拒绝（报错Failed to execute 'select' on 'HTMLInputElement': The element is not focusable）
替代方案：不用select()也能实现“视觉全选”
如果 select() 真的不可用（比如 readonly + contenteditable 混合场景），可以用 setSelectionRange() 手动控制光标位置。
它比 select() 更底层，也更可控，但需要手动计算起始/结束位置。
- 全选文本只需：
input.setSelectionRange(0, input.value.length);
- 注意：必须先
focus()，否则部分浏览器不响应 - 对
type="password"有效，而select()在某些版本 Safari 里会失败 - 如果 value 是动态更新的（比如受控组件），得确保调用时
value已同步到 DOM，否则长度算错
select() 就容易掉链子。这时候别硬刚，换 setSelectionRange() + 显式 focus()，反而更稳。 
