:placeholder-shown 不能直接判断“是否为空”，因为它仅在占位符正视觉显示且输入框未获焦、未输入过内容时匹配，而非值为空的等价条件；它不响应清空、粘贴、失焦等动态操作，对 number/date 类型及有 value 属性的输入框完全失效，仅适用于初始无值、带 required 的静态提示场景，实时校验必须依赖 JavaScript 监听 input/paste 等事件并手动控制 disabled 状态。
为什么 :placeholder-shown 不能直接判断“是否为空”
:placeholder-shown 只在输入框**当前显示 placeholder 文本且未获得焦点、也未被用户输入过内容**时才匹配。一旦用户输入又删空，或聚焦后失焦但值为空，该伪类就失效了。它不是“值为空”的等价判断，而是“占位符正在视觉上显示”的状态快照。
这意味着：input:placeholder-shown + button 这类选择器，在用户输完再清空后不会重新触发隐藏按钮——按钮会意外保持可用，形成验证漏洞。
- 仅适用于初始加载时的静态控制（如页面刚打开、所有字段为空）
- 无法响应
input、blur、paste等动态操作 - 对
type="number"、type="date"或带value属性的输入框完全不生效
:placeholder-shown 的唯一可靠用法场景
它只适合做「初始禁用 + 占位符引导」的轻量提示，比如登录页两个字段都空时默认禁用按钮，并靠占位符文字暗示用户需填写：
<input type="text" placeholder="用户名" required> <input type="password" placeholder="密码" required> <button type="submit">登录</button>
CSS 写法（注意必须加 required 且初始无 value）：
立即学习“前端免费学习笔记（深入）”；
input:placeholder-shown ~ button {
opacity: 0.5;
cursor: not-allowed;
}
input:placeholder-shown ~ button:disabled {
display: none; /* 或用 pointer-events: none */
}
- 必须确保所有
input初始无value，且有placeholder -
~是后续兄弟选择器，按钮必须在 input 之后且同级 - 禁用按钮仍需配合
disabled属性，仅 CSS 视觉禁用不可靠（可右键提交、键盘回车绕过）
真正能响应空值变化的方案只有 JavaScript
依赖 :placeholder-shown 做实时控制，等于把业务逻辑交给 CSS，结果必然是漏判。真实项目中必须用 JS 监听输入并同步设置 disabled 属性：
const inputs = document.querySelectorAll('input[required]');
const submitBtn = document.querySelector('button[type="submit"]');
<p>const checkForm = () => {
const allFilled = Array.from(inputs).every(el => el.value.trim() !== '');
submitBtn.disabled = !allFilled;
};</p><p>inputs.forEach(input => {
input.addEventListener('input', checkForm);
input.addEventListener('paste', () => setTimeout(checkForm, 0));
});
-
input事件覆盖 typing、delete、backspace；paste需加setTimeout确保值已写入 - 用
trim()防止空格绕过校验 - 不要只监听
blur—— 用户可能一直不移出输入框，但已填完想直接回车
容易被忽略的关键点
很多人以为加了 :placeholder-shown 就一劳永逸，实际线上最常出问题的是这三处：
- 表单有默认值（如从 URL 参数填充），
value不为空 →:placeholder-shown永远不匹配，按钮始终可见但可能无效 - 用户粘贴内容后快速点击按钮，JS 还没执行完
input事件 → 按钮短暂可用，导致空提交 - 移动端软键盘收起时，
blur触发但input未必触发（尤其中文输入法），需额外监听change或使用compositionend
