HTML输入框获焦时自动全选文本的最简方式是onfocus中调用select()，但需确保元素已渲染、可编辑且非disabled/readonly；Vue中应配合$nextTick和ref使用，React中需useRef与useEffect结合监听focus事件。
onfocus 里直接调用 select() 就行
HTML 输入框（<input> 或 <textarea>）在获得焦点时自动全选文本，最简单可靠的方式就是在 onfocus 事件处理器中调用元素自身的 select() 方法。注意：必须确保元素已渲染且可交互，否则调用会失败。
常见错误是写成 onfocus="this.select()" 却没生效——这通常是因为元素还没完成挂载（比如在 Vue/React 中动态插入后立即绑定），或被浏览器默认行为干扰（如移动端软键盘弹出延迟）。
- 原生 HTML 写法：
<input type="text" onfocus="this.select()" value="示例文本"> - 更稳妥的做法是用
addEventListener，避免内联脚本与生命周期冲突：document.getElementById('myInput').addEventListener('focus', function() { this.select(); }); - 如果输入框初始为
disabled或readonly，select()会静默失败；需先确保可编辑状态
Vue 项目里用 @focus 触发 $nextTick
在 Vue 模板中直接写 @focus="$event.target.select()" 往往无效，尤其在组件首次渲染或 v-if 切换后——因为 DOM 更新尚未完成，$event.target 可能还没真正获得焦点或未就绪。
正确做法是借助 $nextTick 确保 DOM 已同步：
立即学习“前端免费学习笔记（深入）”；
<input ref="inputRef" @focus="handleFocus" />
对应方法：
methods: {<br> handleFocus() {<br> this.$nextTick(() => {<br> this.$refs.inputRef?.select();<br> });<br> }<br>}
- 不推荐在
mounted里提前绑定focus事件，容易因条件渲染错过时机 - 使用
ref比依赖$event.target更稳定，尤其在事件委托或嵌套组件中 - 如果输入框被
v-model控制且值为空，select()仍会执行但无视觉效果——这是预期行为，不是 bug
React 中 useEffect + useRef 配合 focus 事件
React 不支持原生 onfocus 属性直接调用方法，必须通过 ref 获取 DOM 节点再操作。关键点在于：不能在事件回调里立刻调用 select()，而应监听 focus 并确保 ref 已绑定。
典型实现：
const inputRef = useRef(null);<br><br>useEffect(() => {<br> const handleFocus = () => {<br> if (inputRef.current) inputRef.current.select();<br> };<br> const el = inputRef.current;<br> el?.addEventListener('focus', handleFocus);<br> return () => el?.removeEventListener('focus', handleFocus);<br}, []);
JSX 中：
<input ref={inputRef} />
- 不要在
onChange或onClick里手动触发focus()后立刻select()，中间缺少微任务队列等待，大概率失效 - 服务端渲染（SSR）下，
useEffect是安全边界，避免直接操作 undefined 的 ref.current - 若使用
react-hook-form等库，注意其内部可能拦截原生 focus 行为，需查阅文档确认事件是否透传
移动端 Safari 和 iOS 键盘弹起时的兼容性问题
iOS Safari 在软键盘弹出过程中，focus 事件可能触发两次，或 select() 被忽略——这不是代码问题，而是 WebKit 的已知限制。
缓解方案有限，但可降低失败率：
- 给输入框加
autofocus属性（仅适用于页面加载时首个输入框） - 延迟执行
select()：在focus回调里用setTimeout(() => el.select(), 100)，避开键盘动画帧 - 避免在 modal 弹出后立即
focus()，等transitionend或setTimeout一小段时间再操作 - 某些场景下，
setSelectionRange(0, el.value.length)比select()更可控，尤其对type="number"或带格式化逻辑的输入框
真正麻烦的不是怎么写，而是不同平台对“焦点获取完成”的定义不一致——iOS、Android WebView、桌面 Chrome 各有节奏，测试时务必真机验证。
