最可靠方式是用label的for属性匹配input的id。常见错误包括for缺失、id不一致或嵌套时漏id；JS聚焦需确保元素存在且未禁用，注意SSR和iOS Safari兼容性；date类型在各浏览器行为差异大，Safari需二次点击，Firefox无原生选择器。
点击文本触发
直接给 label 设置 for 属性并匹配输入框的 id，是最可靠、无障碍、无需 JS 的方式。浏览器原生支持点击 label 自动聚焦/激活关联的表单控件。
常见错误是只写了 label 但没配 for，或 id 值不一致（大小写、空格、拼写）；还有的把 input 套在 label 里却忘了加 id —— 这种嵌套写法虽可行，但失去语义化优势，也不利于屏幕阅读器识别。
用 JavaScript 手动聚焦时要注意兼容性
如果必须用 JS（比如文本不在 label 中，或需额外逻辑），调用 .focus() 即可，但得确保元素已渲染且未被 disabled 或 readonly 阻止。
在 Vue/React 等框架中，容易因异步渲染导致节点还没挂载就调 .focus()，结果静默失败；SSR 场景下服务端没有 focus() 方法，会报 TypeError: Cannot read property 'focus' of null。
- 先查 DOM：用
document.getElementById("xxx")或ref确保拿到真实元素 - 避免在组件初始化阶段立即调用，改用
setTimeout(() => el.focus(), 0)或el.focus({ preventScroll: true })（部分旧版 Safari 不支持preventScroll） - 移动端 iOS Safari 对
type="date"的.focus()支持不稳定，有时需用户再点一次才唤出日期选择器
type="date" 在不同浏览器的行为差异
这不是聚焦问题本身，但直接影响“点击后是否真能选日期”——很多开发者以为聚焦了就完事，结果发现 Chrome 正常，Safari 点击无反应，Firefox 显示为文本框。
- Chrome / Edge：聚焦后自动弹出原生日期选择器
- Safari（macOS/iOS）：聚焦不会自动弹窗，必须用户再次点击输入框内部才触发；iOS 上甚至可能降级为文本输入
- Firefox：默认显示为文本框，不提供原生 picker，除非用
inputmode="numeric"+ CSS 诱导，或引入 polyfill - 如需强一致性，得配合
click事件手动触发showPicker()（仅 Chromium 112+ 支持，input元素上可用）
为什么不用 onclick="xxx.focus()" 写内联事件？
不是不能用，而是容易埋坑：内联 JS 无法访问模块作用域变量，调试困难；多个同类操作重复写逻辑；更重要的是，它绕过了标签语义，对键盘用户（Tab 切换后按 Space/Enter）无效——他们点击 label 是能触发的，但点击一个带 onclick 的 span 默认没交互行为。
- 坚持用
label + for是最省心的选择 - 若文本必须是
div或span，至少加role="button"和tabindex="0"，并监听keydown处理 Enter/Space - 别忽略
cursor: pointer和:hover样式，否则用户看不出可点
实际项目中最容易被忽略的，是 Safari 下 focus() 不等于唤出日期面板，以及 label 的 for 值和 input 的 id 之间一个不可见空格就能让整个功能静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
