:placeholder-shown 不能直接监听“有无输入”，因其仅在 placeholder 实际显示时生效，而显示与否受 value 值、js 赋值、聚焦状态及浏览器渲染逻辑共同影响，易导致状态不同步。
为什么:placeholder-shown不能直接监听“有无输入”
:placeholder-shown只在 placeholder **实际显示时**触发，而它是否显示不仅取决于输入框是否为空，还受 value 属性、input.value JS 赋值、以及是否聚焦（某些浏览器在聚焦后即使为空也隐藏 placeholder）影响。比如：input.value = '' 后未触发重绘，或用 setCustomValidity 干扰了渲染逻辑，都可能导致伪类失效。
常见误判场景：用户清空内容后快速失焦，placeholder 闪一下又消失；或 SSR 渲染时服务端没传 value，但客户端 JS 立即赋空字符串，导致初始态不匹配。
用:placeholder-shown配合:focus-within做状态组合判断
单靠 :placeholder-shown 只能知道“placeholder 正在显示”，但结合 :focus-within（父容器内元素获得焦点）就能区分三种状态：空且未聚焦、空且正编辑、非空（无论是否聚焦）。这对控制辅助文案的显隐/样式很实用。
- 空且未聚焦 → 显示灰色提示文案，placeholder 可见
- 空且正在输入 → placeholder 隐藏，但需保留提示文案（如“请输入手机号”，带红色边框）
- 非空 → 提示文案可收起或转为成功图标
示例结构：
<div class="input-wrapper"> <input type="text" placeholder="请输入邮箱"><span class="helper-text">用于登录和找回密码</span> </div>
CSS 控制逻辑：
.input-wrapper .helper-text {
opacity: 0.6;
}
.input-wrapper input:placeholder-shown + .helper-text {
opacity: 1;
}
.input-wrapper:focus-within input:not(:placeholder-shown) + .helper-text {
opacity: 0.4;
}
JS fallback必须监听input而非change
change 事件只在失焦后触发，无法响应实时删除；而 input 事件能捕获每次键入、粘贴、剪切甚至 IME 输入，是唯一可靠选择。但要注意：手动设置 input.value = '' 不会自动触发 input 事件，需主动 dispatchEvent(new Event('input', { bubbles: true }))。
- 监听
input事件后，用el.value.trim() === ''判断是否为空（防空格干扰） - 避免在事件回调里频繁操作 DOM，可用
requestAnimationFrame节流辅助文案更新 - 对 type="number" 的输入框，
value为空时可能是''或'0'，需额外处理
辅助文案位置错乱？检查display和visibility层级
用 :placeholder-shown 控制文案显隐时，若文案用了 display: none，会导致父容器高度塌陷，引发布局跳动。更稳妥的做法是用 visibility: hidden + opacity: 0 + pointer-events: none 组合，既保留占位，又禁用交互。
另外注意：如果输入框被包裹在 label 内，:focus-within 在部分 Safari 版本中不触发，此时应把 wrapper 改为 div 并显式绑定 for/id。
真正难的是 placeholder 显隐与 JS 状态不同步——比如表单重置后未清空 input.value，或 Vue/React 中 v-model 绑定延迟一帧。这种时候，别硬扛 CSS 伪类，老老实实加个 data-has-value 属性由 JS 驱动更稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
