在 Firefox 中，通过 JavaScript 手动清空 autofill 填充的输入框（如 input.value = ''）后，placeholder 不会自动恢复；而使用原生 form.reset() 或触发浏览器重置逻辑可正确恢复占位符。
在 firefox 中，通过 javascript 手动清空 autofill 填充的输入框（如 `input.value = ''`）后，placeholder 不会自动恢复；而使用原生 `form.reset()` 或触发浏览器重置逻辑可正确恢复占位符。
Firefox 对自动填充（autofill）字段的内部状态管理与 Chrome 等浏览器存在差异：当浏览器通过密码管理器（如 Bitwarden）或内置 autofill 机制填充表单时，它不仅设置 value 属性，还会标记该字段处于“已用户交互/已填充”状态。此时仅执行 input.value = '' 仅清空值，但未重置该内部状态，导致 placeholder 无法重新显示——即使 DOM 中 value 已为空、placeholder 属性仍存在。
✅ 推荐解决方案：优先使用原生 form.reset()
该方法会完整还原表单到初始 HTML 状态（包括重置所有 value、checked、selected 等），同时通知浏览器清除 autofill 关联状态，从而确保 placeholder 正常显示：
// ✅ 正确：触发原生重置，兼容 Firefox
document.forms.login.addEventListener('submit', e => {
e.preventDefault();
// ... 执行 AJAX 提交逻辑
fetch('/api/login', { method: 'POST', body: new FormData(e.target) })
.then(res => res.json())
.then(data => {
console.log('Login success:', data);
e.target.reset(); // ← 关键：使用 reset() 而非手动赋值
});
});
⚠️ 不推荐方式：逐个赋空 input.value
以下写法在 Firefox 中失效（placeholder 消失且不回归）：
// ❌ Firefox 下失效：placeholder 不恢复
[...e.target.elements].forEach(el => {
if (el.value !== '') el.value = ''; // 无法重置 autofill 状态
});
? 进阶修复（若必须手动控制）：强制触发 input 事件 + 清空 + 重置伪类
当需精细控制（如保留部分字段值），可结合 input 事件模拟用户清空行为，并调用 setCustomValidity('') 辅助恢复：
// ✅ 兼容性增强版（手动清空 + 状态重置）
[...e.target.elements].forEach(input => {
if (input.value) {
input.value = '';
// 触发 input 和 change 事件，帮助浏览器识别状态变更
input.dispatchEvent(new Event('input', { bubbles: true }));
input.dispatchEvent(new Event('change', { bubbles: true }));
// 清除可能存在的验证阻塞（辅助 placeholder 显示）
input.setCustomValidity('');
}
});
// 最后强制重绘（可选，针对极少数残留情况）
input.style.opacity = '0.99';
setTimeout(() => input.style.opacity = '', 10);
? 注意事项总结：
-
form.reset()是最简洁、兼容性最佳的方案，应作为首选； - 避免混合使用
reset()和手动value = ''，可能导致状态冲突； - 确保
<input>标签中placeholder属性存在且非空，且未被 CSS（如::placeholder { display: none }）意外隐藏； - 在开发中建议使用真实 autofill 工具（如 Bitwarden、Firefox 内置保存）测试，而非仅手动输入后清空。
通过遵循上述实践，即可彻底解决 Firefox 下 autofill 后 placeholder 不重现的问题，保障跨浏览器表单体验一致性。
