input获取焦点时自动选中内容需在focus事件中调用select()，动态插入元素要确保挂载后再绑定，移动端Safari需setTimeout(fn,0)兼容，textarea同理，contenteditable需用getSelection().selectAllChildren()，且须避免影响可访问性。
input 获取焦点时自动选中内容的原生实现
直接用 select() 方法就能做到，不需要任何第三方库。关键在于触发时机——必须等元素真正获得焦点后执行，否则在某些浏览器里会失效。
- 推荐在
focus事件回调里调用select()，而不是click或mousedown - 如果 input 是动态插入 DOM 的，得确保它已挂载、可交互后再绑定事件
- 移动端 Safari 对
select()支持不稳定，部分场景需加setTimeout延迟执行（见下一点）
为什么 setTimeout(fn, 0) 有时是必需的
Chrome 和 Safari 在某些组合下（比如通过标签页切换或 JS 触发 focus()）会把 select() 拦截掉，表现为光标定位了但没高亮文字。加一层异步能绕过这个限制。
input.addEventListener('focus', () => {
setTimeout(() => input.select(), 0);
});
- 不是所有情况都需要
setTimeout，但加了更稳妥 - 不能用
requestAnimationFrame替代——它比setTimeout(fn, 0)更晚，可能错过焦点激活窗口 - 如果 input 同时设置了
autofocus，记得监听focus而非DOMContentLoaded，否则容易漏掉首次聚焦
textarea 和 contenteditable 元素同样适用
select() 方法对 <textarea> 原生支持；对 contenteditable 元素则需配合 getSelection() 和 range.select() 手动模拟，但多数场景直接用 select() 即可。
-
<textarea>可以直接用和input一样的写法 - 对
contenteditable="true"的<div>，select()不生效，得用：document.getSelection().selectAllChildren(el) - 注意：Firefox 对
selectAllChildren的行为略有差异，建议优先用原生input或textarea
避免影响键盘操作和可访问性
自动选中内容会覆盖用户原本的光标位置，如果用户是用 Tab 键导航进来，再立刻全选，反而打断输入流。所以得判断是否真有必要全选。
立即学习“前端免费学习笔记（深入）”；
- 仅对“预期用户要替换全部内容”的场景启用，比如搜索框、ID 输入框、密码重置字段
- 不要对
type="number"或type="date"使用select()，它们不支持文本选中逻辑 - 屏幕阅读器用户可能依赖初始光标位置理解上下文，全选后若没语音提示，会降低可访问性
