如何通过CSS ::placeholder-shown判断输入框是否为空并触发浮动标签？-css教程-PHP中文网

::placeholder-shown 不能直接判断“是否为空”，因为它仅在 placeholder 实际显示时生效，触发条件是“聚焦且内容为空”或“未聚焦但内容为空且 placeholder 未被覆盖”，输入空格、换行符或全角空格即失效，无法区分逻辑空值，故仅适用于视觉辅助，不可用于表单校验。

如何通过css ::placeholder-shown判断输入框是否为空并触发浮动标签？

为什么 `::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：

CSS婚礼策划服务机构宣传网站模板

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) 延迟读取。