label 不触发 focus 事件，需监听 input 等可聚焦元素；点击 label 无响应时检查 for/id 是否一致、input 是否 disabled/hidden 或被隐藏；推荐用 focusin 替代 focus；浮动 label 要求 input 在前、label 在后且 for 关联。
label 本身不触发 focus 事件，它靠浏览器原生行为把焦点“传递”给关联的表单控件；focus 事件必须监听在 input、textarea、select 等可聚焦元素上，而不是 label。
label 点击后 input 没获得焦点？先查这三件事
点击 label 文本却没让 input 聚焦，不是 JS 问题，而是语义或状态断了：
-
label的for属性值和input的id不完全一致（大小写、连字符、空格差一点都不行） -
input被设了disabled，或type="hidden"——这两类元素不可聚焦，label 点击必然失效 -
input或其父容器用了display: none或visibility: hidden，视觉隐藏请改用position: absolute; clip: rect(1px, 1px, 1px, 1px)
想监听“用户通过 label 进入输入框”？focusin 比 focus 更可靠
focus 事件只在元素自身被聚焦时触发，但用户点 label 是间接聚焦；focusin 冒泡且捕获所有进入方式（鼠标点 label、Tab 到 label、屏幕阅读器跳转），更适合做统一响应：
const input = document.getElementById('email');
input.addEventListener('focusin', () => {
console.log('用户以任意方式进入了这个输入框');
});
- 别用
label.addEventListener('click', ...)模拟——破坏原生语义，且绕过键盘导航 - 若需区分来源（是点 label 还是直接点 input），可结合
event.relatedTarget判断，但多数场景无需区分 -
focusin在 iOS Safari 和旧版 Android 上兼容性更好，focus在某些动态渲染后可能漏触发
浮动 label（label 上移）必须把 label 放在 input 后面
纯 CSS 实现 label 上浮动画，依赖 input:focus + label 选择器，所以 HTML 结构必须是：input 元素在前，label 在后，并用 for 关联：
立即学习“前端免费学习笔记（深入）”；
<input type="text" id="username"> <label for="username">用户名</label>
- CSS 写法示例：
input:focus + label { transform: translateY(-16px); } - 如果用隐式包裹（
<label>用户名<input></label>），无法用+选中 label，得改用 JS 或调整结构 - 要保持“已输入内容时 label 仍上移”，需配合
:placeholder-shown:not(:focus)或 JS 切换 class，纯 CSS 有局限
最容易被忽略的是：label 和 input 的绑定一旦被 DOM 操作打断（比如 replaceWith()、v-if 切换、React 组件重渲染），for/id 关系就失效了——这时候再点 label，什么都不会发生。动态场景下，隐式包裹更稳，但得接受它对布局和样式的限制。
