H5自动填充导致Vue/React响应式数据不同步，需手动派发input事件解决：优先用InputEvent，旧版Safari退化为Event；推荐监听animationstart或blur触发；Vue需注意nextTick和时机，React需同步state。
在 H5 页面中，当浏览器自动填充（如密码、用户名）后，Vue/React 等框架的响应式数据往往未同步更新，表现为 input 的绑定值仍为空。这是因为自动填充不触发原生 input 或 change 事件，导致框架监听失效。解决核心是：用 JS 主动模拟一次合法的 input 事件，通知框架“值已改变”。
手动派发 input 事件（兼容 Vue2/Vue3/React）
在自动填充发生后（例如页面加载完成或聚焦失焦时），获取目标 input 元素，创建并派发 InputEvent：
- 优先使用标准
InputEvent构造函数（现代浏览器支持）：
const input = document.querySelector('input[name="username"]');
if (input && input.value) {
input.dispatchEvent(new InputEvent('input', { bubbles: true }));
}
- 若需兼容旧版 iOS Safari（不支持
InputEvent构造），可退化为Event并手动设置value属性：
const event = new Event('input', { bubbles: true });
input.value = input.value; // 确保 value 是最新值
input.dispatchEvent(event);
监听 autofill 并自动处理（推荐时机）
不能只靠页面加载时检查，因为自动填充可能延迟发生。更可靠的方式是监听 animationstart（Chrome/Safari 填充时会触发伪动画）或结合 focus/blur：
- 监听
animationstart（适用于 Chrome 和较新 Safari）：
document.addEventListener('animationstart', (e) => {
if (e.animationName === 'onAutoFillStart') {
const input = e.target;
if (input.tagName === 'INPUT' && input.value) {
input.dispatchEvent(new InputEvent('input', { bubbles: true }));
}
}
});
- 补充监听
blur（用户离开输入框时兜底）：
input.addEventListener('blur', () => {
if (input.value && !input._autoFilledHandled) {
input.dispatchEvent(new InputEvent('input', { bubbles: true }));
input._autoFilledHandled = true; // 防重复触发
}
});
Vue 场景下的特别注意点
Vue 2 使用 v-model 时，仅派发 input 事件即可；Vue 3 的 v-model 默认监听 input，同样适用。但要注意：
- 确保事件在 DOM 更新后派发（如用
nextTick包裹）； - 避免在
mounted中立即操作 —— 此时 DOM 可能尚未被浏览器填充，应延后到setTimeout(..., 100)或监听animationstart； - 若使用自定义组件封装了 input，需确保内部正确透传或手动触发
input事件。
React 场景下需配合受控组件逻辑
React 中必须保证 state 与 input 的 value 同步。派发 input 事件本身不会修改 state，所以需额外同步：
- 先读取 input 当前值，再调用
setState； - 再派发事件（让 React 的合成事件系统感知变化）；
- 或直接在
useEffect中检测值变化并更新 state（更稳妥）：
useEffect(() => {
const input = document.querySelector('input[name="password"]');
if (input && input.value && input.value !== password) {
setPassword(input.value);
}
}, [password]);
