最轻量兼容的做法是为input绑定onclick事件并调用select()，textarea需先focus()再用setTimeout延迟调用select()，推荐使用addEventListener封装复用函数。
input 元素点击时自动选中全部文本的实现方式
直接给 <input> 绑定 onclick 事件并调用 select() 是最轻量、兼容性最好的做法，不需要任何框架或额外依赖。
常见错误是把 select() 放在 onfocus 里——这会导致用户想从中间开始编辑时被迫全选，体验反而变差；而 onclick 只在明确点击时触发，更符合“点一下就选中”的直觉。
- 只对单行
<input type="text">、<input type="search">等有效，<textarea>需单独处理 - 不要写成
onclick="this.select(); return false;"——return false会阻止焦点进入，导致光标不出现 - 如果输入框初始为空（
value=""），select()仍会执行但无视觉反馈，属正常行为
textarea 也要点击选中？得单独加逻辑
<textarea> 不支持 select() 的自动聚焦行为，且它的 select() 方法必须在元素已获得焦点后才能生效，否则在部分浏览器（如 Safari）可能静默失败。
稳妥做法是：先 focus()，再 select()，并用 setTimeout 把 select() 推迟到下一帧，避开渲染时机问题。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
document.querySelector('textarea').onclick = function() {
this.focus();
setTimeout(() => this.select(), 0);
};
- 不能省略
this.focus()，否则 Safari 和旧版 Edge 中select()无效 -
setTimeout(..., 0)不是为了“延迟”，而是确保 DOM 更新完成后再执行选择 - 若该
<textarea>同时绑定了其他onclick处理器，注意事件执行顺序，避免冲突
用 addEventListener 还是内联 onclick？推荐前者
内联写法（<input onclick="this.select()">）虽简短，但不利于复用、调试和维护。现代代码应优先使用 addEventListener，尤其当需要动态控制（比如某些条件下禁用自动选中）时。
注意：多次调用 addEventListener 绑定同一事件类型不会覆盖，而是叠加——容易导致重复选中，务必检查是否已绑定过。
- 推荐封装成可复用函数：
function enableClickSelect(el) { el.addEventListener('click', () => el.select()); } - 若需移除，用
el.removeEventListener('click', handlerRef)，不能传匿名函数 - 对批量元素操作，别用
querySelectorAll('input').forEach(...)直接绑定——要确保元素已挂载到 DOM
移动端点击选中失效？可能是 focus 触发时机问题
在 iOS Safari 和部分安卓浏览器中，click 事件可能比 focus 晚触发，导致 select() 被忽略。此时仅靠 onclick 不够稳定。
更健壮的方案是监听 focus，但加上防抖和条件判断：只在用户主动点击（而非 tab 键切换）时才选中。
- 可通过记录上一次
mousedown位置 +focus时间差来粗略判断是否为点击触发 - 简单场景下，直接改用
onfocus并配合setTimeout：el.onfocus = () => setTimeout(() => el.select(), 10); - 注意：iOS 上
input的select()在软键盘弹出前可能被中断，这是系统限制，无法绕过
input vs textarea）、不同触发方式（点击 vs tab 切入）、不同平台（桌面 vs iOS）对 select() 的支持程度差异很大，简单写一行 onclick="this.select()" 看似能跑，但在真实多端环境中往往漏掉边界情况。 
