React登录页Chrome自动填充无法被onChange/onAnimationStart检测的问题

Chrome密码管理器自动填充表单时，不会触发标准的onChange事件，这是浏览器异步处理自动填充的特性导致的，以下是几种可行的解决方案：

1. 同时监听onInput事件 #

Chrome自动填充在部分场景下会触发onInput事件，在你的SignInInput.tsx组件中，同时绑定onInput和onChange事件，确保捕获值变化：

<input
  type="email"
  value={email}
  onChange={(e) => setEmail(e.target.value)}
  onInput={(e) => setEmail(e.target.value)}
/>
<input
  type="password"
  value={password}
  onChange={(e) => setPassword(e.target.value)}
  onInput={(e) => setPassword(e.target.value)}
/>

2. 定时检查输入框值与状态的一致性 #

由于自动填充是页面加载后异步完成的，可以在组件挂载后定时检查输入框的真实值是否和React状态匹配，捕获到变化后更新状态并清除定时器：

import { useEffect, useState } from 'react';

const SignInInput = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  useEffect(() => {
    const checkTimer = setInterval(() => {
      const emailEl = document.getElementById('signin-email') as HTMLInputElement;
      const passwordEl = document.getElementById('signin-password') as HTMLInputElement;
      
      if (emailEl.value !== email) setEmail(emailEl.value);
      if (passwordEl.value !== password) setPassword(passwordEl.value);
    }, 200);

    return () => clearInterval(checkTimer);
  }, [email, password]);

  return (
    <>
      <input
        id="signin-email"
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <input
        id="signin-password"
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
    </>
  );
};

export default SignInInput;

3. 用MutationObserver监听自动填充样式变化 #

Chrome会给自动填充的输入框添加:-webkit-autofill伪类样式，通过MutationObserver监听元素的样式变化，检测到自动填充后读取真实值：

useEffect(() => {
  const emailEl = document.getElementById('signin-email') as HTMLInputElement;
  const passwordEl = document.getElementById('signin-password') as HTMLInputElement;

  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      if (mutation.attributeName === 'style') {
        const computedStyle = window.getComputedStyle(mutation.target as HTMLElement);
        // 检测Chrome自动填充的标志性阴影样式
        if (computedStyle.webkitBoxShadow.includes('rgba(232, 240, 254, 0.5)')) {
          if (mutation.target === emailEl) setEmail(emailEl.value);
          if (mutation.target === passwordEl) setPassword(passwordEl.value);
        }
      }
    });
  });

  observer.observe(emailEl, { attributes: true });
  observer.observe(passwordEl, { attributes: true });

  return () => observer.disconnect();
}, []);

4. 禁用自动填充（备选） #

如果上述方法都无法满足需求，可临时添加autocomplete="new-password"属性禁用自动填充，但这会降低用户体验，仅作为应急方案：

<input type="password" autocomplete="new-password" />

内容的提问来源于stack exchange，提问作者JOSE DANIEL GOMEZ CABRERA