在 Firefox 中，通过 JavaScript 手动清空 autofill 填充过的输入框（如 input.value = ""）会导致 placeholder 永久隐藏；而使用原生 form.reset() 或确保 DOM 状态同步可恢复 placeholder 显示。
在 firefox 中，通过 javascript 手动清空 autofill 填充过的输入框（如 `input.value = ""`）会导致 placeholder 永久隐藏；而使用原生 `form.reset()` 或确保 dom 状态同步可恢复 placeholder 显示。
Firefox 对自动填充（autofill）字段的 placeholder 渲染机制与 Chrome 不同：当浏览器通过密码管理器（如 Bitwarden）或内置 autofill 填入值后，即使 JS 将 input.value 设为空字符串，Firefox 仍可能保留内部的“已填充”状态标记，导致 placeholder 不触发重绘。
✅ 推荐解决方案：优先使用原生 form.reset()
该方法不仅清空值，还会重置所有表单控件的 :valid、:invalid、:-moz-autofill 等伪类状态，并强制 placeholder 重新渲染：
document.forms.login.addEventListener('submit', e => {
e.preventDefault();
// 发起 AJAX 请求...
fetch('/login', { method: 'POST', body: new FormData(e.target) })
.then(() => {
e.target.reset(); // ✅ 正确方式：触发完整表单重置
});
});
⚠️ 手动赋值需配合 DOM 强制刷新（备用方案）
若因业务逻辑必须逐个清空（如跳过某些字段），可在设空后调用 input.removeAttribute('value') 并触发重排：
[...e.target.elements].forEach(input => {
input.value = '';
// 移除 value 属性（尤其对 type="text/password" 有效）
if (input.hasAttribute('value')) {
input.removeAttribute('value');
}
});
// 强制 Firefox 重绘 placeholder（可选，通常 reset() 已足够）
e.target.style.display = 'none';
e.target.offsetHeight; // 触发重排
e.target.style.display = '';
? 关键注意事项
- 不要仅依赖
input.value = ''—— Firefox 的 autofill 状态独立于value属性； -
form.reset()是语义最准确、兼容性最佳的方式，且自动处理<select></select>、<textarea></textarea>、复选框等所有控件； - 避免混合使用
reset()和手动赋值，否则可能引发状态不一致； - 若表单含动态生成字段，确保它们在
reset()前已加入 DOM（否则会被忽略）。
总结：在 Firefox 中修复 placeholder 消失问题的核心，是尊重表单的原生生命周期 —— 用 form.reset() 替代裸值操作，即可兼顾功能正确性与跨浏览器一致性。
