可靠。现代浏览器中input/textarea获得焦点时placeholder默认自动隐藏是规范行为，若仍显示多因伪元素被错误覆盖、js重置value或ui库劫持focus逻辑；建议用:focus::placeholder显式设opacity:0确保隐藏。
focus 时 placeholder 消失的原生行为是否可靠？
现代浏览器（Chrome 80+、Firefox 75+、Safari 14+）中，input 或 textarea 元素在获得焦点时，placeholder 默认就会自动隐藏——这是规范行为，无需额外代码。如果你发现 focus 后 placeholder 仍显示，大概率是以下原因之一：
- 使用了自定义伪元素（如
::placeholder被错误覆盖或设置了opacity: 1 !important） - 输入框被 JS 强制重置了 value（比如清空后又立即设为空字符串，但 DOM 状态未同步）
- 某些 UI 库（如 Ant Design、Element Plus）封装了 input，其内部实现可能劫持了 focus/blur 逻辑，导致 placeholder 行为异常
如何用 CSS 确保 focus 时 placeholder 隐藏干净？
即使原生支持，也建议显式控制以规避兼容性抖动或样式干扰：
- 不要仅依赖默认行为，用
::placeholder配合:focus主动设为不可见 - 注意各浏览器前缀必须写全，否则 Safari 或旧版 Edge 可能不生效
- 避免使用
display: none（无效），应改用opacity: 0或color: transparent
input:focus::placeholder,
textarea:focus::placeholder {
opacity: 0;
/* 或 color: transparent; */
}
/* 兼容旧版 WebKit */
input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
opacity: 0;
}
/* 兼容 Firefox 19+ */
input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder {
opacity: 0;
}
/* 兼容 IE 10+ */
input:focus:-ms-input-placeholder,
textarea:focus:-ms-input-placeholder {
opacity: 0;
}
JavaScript 强制清除 placeholder 的风险点
极少数场景（如动态表单、无障碍测试模拟）需要 JS 控制，但要注意：
- 直接删掉
placeholder属性会导致 blur 后无法恢复，应缓存原始值 - 不要用
input.placeholder = ''清空，这会永久丢失提示文本 - 更稳妥的做法是用 class 切换 + CSS 控制显示，而非操作属性
const input = document.querySelector('input');
const originalPlaceholder = input.placeholder;
<p>input.addEventListener('focus', () => {
input.classList.add('hide-placeholder');
});
input.addEventListener('blur', () => {
input.classList.remove('hide-placeholder');
});</p>
对应 CSS：
.hide-placeholder::placeholder { opacity: 0; }
移动端 iOS Safari 的 placeholder 闪烁问题
iOS 15–16 的 Safari 存在 focus 时 placeholder 先闪一下再消失的问题，本质是渲染时机竞争：
- 不要给 input 设置
transition（尤其涉及 opacity 或 color） - 避免在 focus 事件里触发 layout 强制重排（如读取
offsetHeight） - 如果用了第三方键盘库（如
react-native-web或mobile-detect），检查是否监听了input并触发了多次 focus
最简修复：加一行 CSS 强制硬件加速，避免合成层切换抖动
input, textarea {
transform: translateZ(0);
}
真正难处理的不是“怎么让它消失”，而是确保它只在该消失的时候消失——比如用户还没输入就 blur 了，placeholder 得立刻回来；而如果用户已输入内容，它本就不该出现。这些边界状态，CSS 伪类比 JS 更稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
