placeholder淡出效果默认不生效，因浏览器原生不支持对::placeholder直接应用transition或opacity动画；需通过js监听focus/blur事件并切换类名，配合外部提示元素（如label内span）实现css过渡效果。
input placeholder 淡出效果为什么默认不生效
因为 placeholder 是纯文本提示，浏览器原生不支持 CSS 动画过渡；直接对 ::placeholder 添加 transition 或 opacity 动画无效。真正起作用的，是输入框本身的聚焦/失焦状态变化，需要靠 JavaScript 监听事件 + 手动控制样式类来模拟“淡出”。
用 focus/blur 事件配合 CSS transition 实现平滑淡出
核心思路：给 input 添加一个包裹层（如 div），把视觉上的“提示语”从 placeholder 移到外部 label 或伪元素中，再通过 JS 控制其显隐。这样就能自由加 transition: opacity 0.2s ease。
实操建议：
- 用
<label></label>包裹<input>，设置position: relative；label内放一个<span class="hint"></span>作为提示文字 - 初始时
.hint用opacity: 0.6+transition: opacity 0.2s - 监听
input.focus：移除.hint的opacity，或加.focused类让其opacity: 0 - 监听
input.blur且input.value === ''时，再恢复opacity: 0.6
示例关键代码：
<label class="input-wrap"> <input type="text" id="username"><span class="hint">请输入用户名</span> </label>
.input-wrap { position: relative; }
.hint { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); opacity: 0.6; transition: opacity 0.2s ease; }
.input-wrap.focused .hint { opacity: 0; }
const input = document.getElementById('username');
const wrap = input.parentElement;
input.addEventListener('focus', () => wrap.classList.add('focused'));
input.addEventListener('blur', () => {
if (!input.value) wrap.classList.remove('focused');
});
兼容性与移动端要注意的坑
移动端 Safari 对 focus 触发时机较敏感，有时点击输入框后不触发 focus（尤其在页面刚加载或键盘未弹出时）。另外，iOS 上 input 的 placeholder 默认会随聚焦自动隐藏，但外部 .hint 不会——这反而成了优势，只要逻辑写对，就能统一行为。
容易踩的坑：
- 没判断
input.value就在blur里隐藏提示，导致用户输一半点别处再回来，提示没了 - 用
visibility: hidden替代opacity，失去过渡效果（visibility不可动画） - 没给
.hint设pointer-events: none，导致点击提示文字无法聚焦到input - 在 Vue/React 等框架里直接操作 DOM 类名，没用响应式数据驱动，状态易不同步
更轻量的纯 CSS 方案（仅限现代浏览器）
如果只支持 Chrome 100+、Firefox 110+、Safari 16.4+，可以用 :has() 伪类免 JS：
.input-wrap:has(input:focus) .hint,
.input-wrap:has(input:not(:placeholder-shown)) .hint {
opacity: 0;
}
但注意：:placeholder-shown 在用户输入空格后可能仍为 true（因空格不算“内容”），而 :has(input:focus) 更可靠。不过这个方案无法区分“有内容但失焦”和“无内容且失焦”，所以淡出后不会自动淡回——得搭配 JS 补全逻辑。
实际项目里，小范围使用建议选 JS 方案；大项目已有 UI 库，优先查它是否内置了 floating label 组件（比如 MUI 的 TextField 或 Ant Design 的 Input），避免重复造轮子。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
