旧版安卓（≤4.3）完全不支持:placeholder-shown伪类，浏览器在语法解析阶段即忽略该规则；必须用JavaScript监听input、focus、blur事件，通过value.trim() === ""判断状态并手动切换placeholder-shown/has-value类来模拟。
旧版安卓（≤4.3）根本不支持 :placeholder-shown
Android 4.3 及更早的 WebView 内核对 :placeholder-shown 完全无解析能力——它不是“样式没生效”，而是浏览器压根不认识这个伪类，CSS 规则直接被跳过。你在 DevTools 里甚至看不到该选择器被加载或标记为 invalid，因为它在语法解析阶段就被忽略了。Autoprefixer 对它无效，加前缀、提高权重、换写法都没用。
input 事件监听是唯一可靠 fallback 方案
必须用 JavaScript 检测输入框内容是否为空，并手动切换 class 来模拟状态。核心逻辑是：value.trim() === "" 等价于占位符“应显示”，否则视为“已输入”。注意不能只依赖 input.value === ""，空格、零宽字符、粘贴内容都可能让 DOM 值为空但语义上非空。
- 监听
input事件（不是change），保证实时响应每次按键、粘贴、删除 - 同时监听
focus和blur，处理初始聚焦时 placeholder 是否仍可见（比如用户刚点进去还没输） - 避免在
input事件里反复调用classList.toggle，改用一次判断 + 显式add/remove更稳定
示例代码：
const input = document.querySelector('input[placeholder]');
const updatePlaceholderState = () => {
const isEmpty = input.value.trim() === '';
input.classList.toggle('placeholder-shown', isEmpty);
input.classList.toggle('has-value', !isEmpty);
};
input.addEventListener('input', updatePlaceholderState);
input.addEventListener('focus', updatePlaceholderState);
input.addEventListener('blur', updatePlaceholderState);
// 初始状态也要触发一次
updatePlaceholderState();
为什么不用 propertychange 或 DOMSubtreeModified
这些事件在旧安卓 WebView 中支持度极差：propertychange 是 IE 专属，DOMSubtreeModified 在 Android 4.0–4.3 中基本不可靠，且性能开销大。而 input 事件虽在部分老内核中存在延迟（如 Android 4.1 的 WebView 对中文输入法回车后才触发），但它仍是唯一被广泛实现、可预测的钩子。
- 不要监听
keydown/keyup：无法捕获粘贴、右键粘贴、自动填充、语音输入等场景 - 不依赖
setInterval轮询：耗电、卡顿、易漏判，且在后台标签页中会被节流 - 若用 Vue/React，别试图在模板里写
:class="{ 'placeholder-shown': !value.trim() }"—— 这会绕过初始 placeholder 显示逻辑，且 SSR 渲染时无法同步状态
CSS 侧需完全解耦原生伪类依赖
所有原本基于 input:placeholder-shown 的规则，必须重写为 input.placeholder-shown。特别注意：
- 移除所有
:not(:placeholder-shown)写法，替换成.has-value类；否则旧安卓下整个选择器链失效 - 浮动标签、边框变色、图标显隐等效果，全部绑定到 class 上，而非伪类组合
- 如果用了
input:focus:placeholder-shown这类复合伪类，旧安卓下它不会匹配任何东西——得拆成.placeholder-shown.focus并在 focus/blur 时同步 togglefocus类
关键点在于：CSS 不再承担状态判断职责，只负责样式映射；状态管理彻底交给 JS，且必须覆盖初始化、输入、聚焦、失焦四个时机。漏掉任意一个，视觉就会错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
