直接调用 input.select() 最可靠，需绑定 focus 事件而非 click，注意 readonly/disabled 状态、移动端 user-select 样式及 type="number" 兼容性问题。
input获得焦点时全选文字的原生方案
直接用 select() 方法最可靠，所有现代浏览器都支持，不需要监听点击事件——监听 focus 更合理，因为用户可能用 Tab 键聚焦，或调用 focus() 程序触发。
常见错误是绑定在 click 上：鼠标点击 input 边框、占位符区域或快速双击时，select() 可能被浏览器默认行为覆盖，导致选中失效。
- 正确做法：给 input 绑定
focus事件，立即调用this.select() - 注意：需确保元素已渲染且可交互，动态插入的 input 要等 DOM 就绪后再绑定
- 若 input 有
readonly或disabled，select()无效，需先移除或跳过
React 中实现 focus 后自动全选
函数组件里不能直接在 JSX 里写 onFocus={e => e.target.select()}，因为 React 的合成事件对象 e 不是原生事件，e.target 虽然存在，但某些旧版 React（如 16.x）中异步执行可能丢失焦点上下文。
更稳妥的是用 useRef + useEffect 确保 DOM 元素真实可用：
const inputRef = useRef(null);
useEffect(() => {
if (inputRef.current) {
inputRef.current.select();
}
}, []);
return <input ref="{inputRef}" onfocus="{(e)"> e.target.select()} />;
-
onFocus里调用select()是必须的，否则 Tab 进入时不触发 -
useEffect里的select()主要覆盖首次挂载后自动聚焦的场景（比如登录页 autoFocus） - 避免在
onChange或onClick里调用，时机不对，容易和输入逻辑冲突
防止移动端 Safari 全选失效
iOS Safari 对 input 的 select() 限制较严：如果元素未真正“可编辑”（例如 CSS 设置了 -webkit-user-select: none），或调用时机在页面未完全就绪时（如 DOMContentLoaded 前），会静默失败。
- 检查是否误加了
style="user-select: none"或全局重置样式 - 避免在
document.write或内联脚本中立即调用select()，改用setTimeout(() => el.select(), 0)微任务延迟 - 移动端建议加
autofocus属性辅助，但注意它仅对首个可聚焦元素生效，且可能被系统拦截
input[type="number"] 为什么 select() 没反应
这是浏览器行为差异导致的：Chrome 和 Edge 允许对 number 类型调用 select()，但 Safari 和部分旧版 Firefox 会忽略——因为数字输入框的值不是纯字符串，底层处理逻辑不同。
- 解决方案：改用
type="text"并配合inputmode="numeric"和正则校验，保持体验又兼容全选 - 若必须用
number，可退而求其次，在 focus 时用setSelectionRange(0, 9999)，但 Safari 仍可能不响应 - 注意：
select()对date、time、color等类型一律无效，这些控件没有文本选择概念
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
