:focus无法单独实现标签上浮，因它仅响应焦点而不感知输入内容；需结合HTML结构包裹、CSS过渡及JS监听value和focus/blur状态来驱动动画。
聚焦时标签上浮动画不是靠:focus单独实现的，必须配合结构包裹、CSS过渡和JavaScript状态监听，否则标签无法感知输入内容变化。
为什么单纯用:focus无法让label上浮
因为:focus只能响应焦点状态，但标签上浮通常要同时满足两个条件：输入框获得焦点 或 用户已输入内容。纯CSS无法判断value是否为空，所以必须引入状态标记（如class）来驱动动画。
-
:focus只在点击/Tab进入时触发，用户点开又点走、没输内容，label就不该上浮 - 用户粘贴文本、用JS赋值、或通过语音输入时，
:focus不会再次触发，但label仍需上浮 - 移动端软键盘收起后，焦点可能还在，但用户已离开，label应还原——这需要监听
blur而非仅依赖:focus
label上浮必须的HTML结构
label和input必须同级且顺序固定，推荐用<div class="input-group">包裹，label放在input前面或后面均可，但语义上label应在前：
<div class="input-group"> <label for="name">姓名</label> <input type="text" id="name" name="name"> </div>
- 不要把label包在input外面（
<label><input></label>），会导致焦点逻辑混乱、屏幕阅读器识别异常 - 必须设置
for和id匹配，否则点击label无法聚焦input - 避免用
position: absolute强行定位label——它会脱离文档流，transition失效
用CSS transition实现平滑上浮
核心是控制label的transform: translateY()和font-size，并用transition限定只动这两个属性：
立即学习“前端免费学习笔记（深入）”；
.input-group label {
position: absolute;
top: 0;
left: 0;
padding: 8px 0;
font-size: 16px;
color: #999;
transition: transform 0.2s ease, font-size 0.2s ease;
pointer-events: none;
}
.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label,
.input-group input.has-value + label {
transform: translateY(-20px);
font-size: 12px;
color: #007bff;
}
-
:not(:placeholder-shown)可检测是否有输入（前提是设置了placeholder），但不兼容IE -
input.has-value是更可靠的方式，由JS动态添加/移除 - 务必加
pointer-events: none，否则label会挡住input的点击区域 - 别写
transition: all——它会让color等无关属性也参与过渡，造成闪烁
JS监听输入状态补全边界情况
CSS方案在粘贴、剪切、语音输入、清空后回删等场景下容易失步，必须用JS兜底：
const input = document.getElementById('name');
const label = input.nextElementSibling;
const updateLabelState = () => {
if (input.value.trim() || document.activeElement === input) {
input.classList.add('has-value');
} else {
input.classList.remove('has-value');
}
};
input.addEventListener('input', updateLabelState);
input.addEventListener('focus', updateLabelState);
input.addEventListener('blur', () => {
setTimeout(() => updateLabelState(), 0);
});
-
setTimeout(..., 0)确保blur后DOM更新完成再检查value，避免因异步导致label残留上浮态 - 不要只监听
change——它只在失焦后触发，无法响应实时输入 - 移动端iOS Safari对
input事件有延迟，可额外监听compositionstart/compositionend处理中文输入法
最容易被忽略的是：label上浮动画在高DPI屏幕或缩放页面下可能错位，必须用transform: translateY()而非top，且所有单位统一用px或rem，别混用em和%。
