直接用:placeholder-shown伪类即可判断，它仅在input或textarea实际显示placeholder文本时匹配，用户输入空格即失效；该伪类不适用于contenteditable、type="hidden"或disabled控件。
怎样判断输入框是否处于 placeholder 显示状态
直接用 :placeholder-shown 伪类就能捕获——它只在 input 或 textarea 实际显示 placeholder 文本时匹配，哪怕用户只输入了一个空格，它也会立刻失效。注意：这个伪类不适用于 contenteditable 元素，也不触发于 type="hidden" 或 disabled 的表单控件。
常见误判点：input.value === "" 不可靠，因为用户可能输入空格、换行符或全角空格；而 :placeholder-shown 是浏览器原生状态，更准确。
浮动标签动画为什么必须配合 :focus-within 或 :valid
单纯靠 :placeholder-shown 只能知道“占位符正显示”，但无法区分“空但已获得焦点”和“空且未聚焦”两种场景。浮动标签通常要求：空时标签沉底，聚焦后上浮，有内容后固定上浮。所以得组合使用：
-
:placeholder-shown→ 判断是否为空（初始态） -
:focus-within（作用于 label+input 包裹容器）→ 捕获聚焦行为 -
:valid（需加required）→ 区分非空有效态，避免误判数字输入框的 0
示例结构：
<label class="floating-label"> <input type="text" required placeholder="邮箱"><span>邮箱</span> </label>然后用
.floating-label:focus-within span, .floating-label:not(:placeholder-shown) span 触发上浮。
:placeholder-shown 在 Safari 和旧版 Chrome 中的兼容性陷阱
Safari 直到 15.4 才完全支持 :placeholder-shown 对 textarea 的匹配；Chrome 47+ 支持 input，但早期版本对动态修改 placeholder 属性不响应。更隐蔽的问题是：当 input 被 JS 设置 value = "" 后，部分浏览器不会立即重绘 :placeholder-shown 状态，需强制触发 reflow（比如读取 offsetHeight）。
稳妥做法：
– 始终为 input 添加 required 属性（激活 :valid 回退路径）
– 避免仅依赖 :placeholder-shown 控制关键 UI 状态
– 在 JS 中监听 input 和 focus/blur 事件做状态兜底
动画卡顿或闪跳的 CSS 写法雷区
浮动标签常因重排（reflow）导致性能问题。错误写法如用 top + position: relative 触发 layout，或对 transform 使用 % 单位（依赖父容器尺寸，易抖动）。正确姿势：
- 标签元素用
position: absolute，锚定在 input 上方 - 上浮动画只用
transform: translateY(-20px)，搭配transition: transform 0.2s ease - 避免同时过渡
opacity和transform——某些安卓 WebView 会丢帧 - 加
will-change: transform到标签元素（仅在动画频繁时启用）
最易忽略的一点：input 的 padding-top 必须预留足够空间，否则标签上浮后会被裁切——这个留白量要和 translateY 值严格一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
