:placeholder-shown 是必要但不充分的浮动标签条件，因其仅在 placeholder 实际显示时生效，无法覆盖粘贴、js 赋值、type="number"兼容性等边界场景，须结合 :focus-within、input 事件监听及 has-value 类名协同控制。
:placeholder-shown 本身不能直接实现浮动标签，它只是检测输入框是否处于占位符可见状态的开关——真正实现“浮动”需要配合 CSS 过渡、label 定位和状态联动，且必须处理好空值、聚焦、用户输入等边界情况。
为什么 :placeholder-shown 是必要但不充分的条件
这个伪类只在 <input> 或 <textarea></textarea> 的 placeholder 实际显示时为真（比如内容为空且未聚焦，或内容为空但已聚焦但尚未输入）。一旦用户键入任意字符（哪怕是一个空格），它就失效。这意味着：
- 它无法区分“空但已聚焦”和“有内容但全选后删除”的状态
- 它对
type="number"或带inputmode的字段兼容性差（部分浏览器不触发） - 它不响应
value属性的 JS 设置（例如el.value = ""不会重新触发:placeholder-shown）
浮动标签必须搭配 :focus-within 和 JS 监听
纯 CSS 方案必须用 :focus-within 捕获聚焦态，再结合 :placeholder-shown 判断初始空态。典型结构是把 label 放在 input 外层容器里，并用绝对定位上移：
<div class="field"> <label>邮箱</label> <input type="email" placeholder="example@domain.com"> </div>
对应 CSS：
.field {
position: relative;
}
.field label {
position: absolute;
top: 0.5em;
left: 0.75em;
font-size: 0.875em;
color: #666;
transition: all 200ms ease;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field input:not(:valid) + label {
top: -0.75em;
font-size: 0.75em;
color: #333;
}
注意：input:not(:placeholder-shown) 覆盖了输入非空的情况，但 input:not(:valid) 是为了兼容 required 或 type="email" 的校验态（避免用户删光后标签卡在顶部）。
JS 补漏：处理粘贴、清空按钮、程序赋值等场景
用户右键粘贴、点击清空按钮（type="search"）、或 JS 执行 input.value = "" 都不会自动重置 :placeholder-shown 状态。此时需监听：
-
input事件（捕获所有输入变化，包括粘贴、删除） -
change事件（适用于失去焦点时确认） - 对清空按钮显式调用
input.dispatchEvent(new Event('input', { bubbles: true }))
简单补丁示例：
const input = document.querySelector('.field input');
input.addEventListener('input', () => {
// 强制重绘，触发 :placeholder-shown 重计算
input.style.cssText += ';';
});
更稳妥的做法是加一个 has-value 类名控制标签位置，完全脱离伪类依赖。
真正难的不是让标签“浮起来”，而是让它在各种输入路径下保持状态一致——尤其是移动端软键盘切换、IM 输入法组合字符、以及 Safari 对 :placeholder-shown 的延迟触发问题。别只盯着伪类，得把 input、blur、focus、paste 全部串起来看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
