::placeholder-shown 不能直接判断“是否为空”，因为它仅在 placeholder 实际显示时生效，触发条件是“聚焦且内容为空”或“未聚焦但内容为空且 placeholder 未被覆盖”，输入空格、换行符或全角空格即失效，无法区分逻辑空值，故仅适用于视觉辅助，不可用于表单校验。
为什么 ::placeholder-shown 不能直接判断“是否为空”
::placeholder-shown 只在 placeholder 实际显示时才生效，而它触发的条件不是“值为空”，而是“输入框聚焦且内容为空”或“未聚焦但内容为空且 placeholder 未被覆盖”。一旦用户输入空格、换行符或全角空格，::placeholder-shown 就会立即消失——哪怕 input.value.trim() === ''。这意味着它**不是可靠的空值判断依据**，仅适合视觉辅助类场景。
常见错误现象：input::placeholder-shown + .label 规则在用户输入空格后失效，导致浮动标签意外收起；或者在某些浏览器（如 Safari 15.4 之前）中，::placeholder-shown 对 type="number" 或 type="email" 不生效。
- 仅适用于带
placeholder属性的<input>（textarea同样支持） - 不响应 JavaScript 修改
value的变化（除非同时清空 placeholder 显示状态，但无法用 CSS 捕捉） - 无法区分
""、" "、" "（全角空格）等“逻辑空”情况
用 ::placeholder-shown 实现基础浮动标签的最小可行写法
如果你的表单只接受纯文本、允许 placeholder 存在、且能接受“输入空格即视为非空”的体验，可以用它快速实现 CSS-only 浮动标签。关键在于利用兄弟选择器 + transition 配合 placeholder 显示状态切换。
<input type="text" placeholder="姓名" class="input-field"> <label class="floating-label">姓名</label>
对应 CSS：
立即学习“前端免费学习笔记（深入）”；
.input-field {
padding: 0.75rem 0.5rem;
}
.floating-label {
position: absolute;
top: 0.75rem;
left: 0.5rem;
transition: all 0.2s ease;
pointer-events: none;
color: #999;
}
.input-field:focus + .floating-label,
.input-field:not(:placeholder-shown) + .floating-label {
top: -0.75rem;
font-size: 0.8rem;
color: #333;
}
- 必须保证
label是input的**紧邻兄弟元素**（+选择器限制） -
:not(:placeholder-shown)在聚焦且有内容、或失焦但有内容时都生效，比单用:focus更健壮 - 不要依赖
::placeholder-shown做表单校验逻辑——它只是视觉信号
真正可靠的方式：JavaScript 监听 input 事件 + checkValidity()
当需要精确识别“逻辑为空”（比如 trim 后为空）、兼容无 placeholder 场景、或联动校验状态时，必须用 JS。核心是监听 input 和 blur，并用 el.value.trim() === '' 判断，再手动 toggle 类名。
const input = document.querySelector('.input-field');
const label = input.nextElementSibling;
const updateLabelState = () => {
const isEmpty = input.value.trim() === '';
input.classList.toggle('is-empty', isEmpty);
input.classList.toggle('is-filled', !isEmpty);
};
input.addEventListener('input', updateLabelState);
input.addEventListener('blur', updateLabelState);
// 初始化
updateLabelState();
对应 CSS 可复用上面的样式，只需把选择器换成：
.input-field.is-filled + .floating-label,
.input-field:focus + .floating-label {
top: -0.75rem;
font-size: 0.8rem;
color: #333;
}
-
input事件捕获所有输入（包括粘贴、拖入、IME 输入），比change更及时 - 务必在页面加载后立即调用一次
updateLabelState()，否则初始状态可能错乱 - 如果用了
required属性，可额外用input.checkValidity()获取原生校验结果，避免重复逻辑
兼容性与移动端特别注意点
Android Chrome 和 iOS Safari 对 ::placeholder-shown 的支持基本没问题（Chrome 47+，Safari 15.4+），但老版本 iOS（input 可能短暂失去焦点，导致 ::placeholder-shown 闪退；而 JS 方案中，input 事件在粘贴完成前就已触发，value 还是旧值——需加 setTimeout(..., 0) 延迟读取。
- 不要在 CSS 中用
::placeholder-shown控制必填星号（*）显隐——它不可靠 - 移动端软键盘唤起时，
focus可能延迟触发，JS 方案比纯 CSS 更可控 - 若项目需支持 IE，
::placeholder-shown完全不可用，必须全程 JS
真正决定用哪种方案，取决于你能否接受“空格即非空”这个交互契约。接受，就用 CSS；不能，就上 JS——没有中间态。
