Next.js搭配React Hook Form的表单如何关闭autocomplete自动填充

问题本质 #

Safari的表单自动填充逻辑不会触发input、change等标准DOM事件，而React Hook Form默认依赖这些事件实现表单状态和视图的同步，因此会出现视图显示已填充、但表单状态为空的问题。同时Safari对autocomplete="off"的支持存在兼容问题，常规配置无法彻底禁用自动填充。

可落地解决方案 #

方案1：监听自动填充事件主动同步状态（推荐，无需禁用自动填充） #

利用Safari自动填充时会触发animationstart事件的特性，主动同步值到React Hook Form状态：

1. 首先在全局CSS中添加自动填充触发的动画规则：

input:-webkit-autofill {
  animation: onAutoFillStart 0.1s;
}
@keyframes onAutoFillStart {
  from {}
  to {}
}

2. 给表单输入框绑定onAnimationStart事件，触发时调用React Hook Form的setValue同步值：

import { useForm } from 'react-hook-form';

export default function MyForm() {
  const { register, setValue, handleSubmit } = useForm();

  const handleAutoFill = (e: React.AnimationEvent<HTMLInputElement>) => {
    if (e.animationName === 'onAutoFillStart') {
      const target = e.target as HTMLInputElement;
      // 第二个参数设为true会同时触发字段校验
      setValue(target.name, target.value, { shouldValidate: true });
    }
  };

  const onSubmit = (data: unknown) => {
    // 后续提交逻辑
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register('firstName')}
        name="firstName"
        type="text"
        onAnimationStart={handleAutoFill}
        placeholder="名字"
      />
      <input
        {...register('lastName')}
        name="lastName"
        type="text"
        onAnimationStart={handleAutoFill}
        placeholder="姓氏"
      />
      {/* 其余邮箱、地址、手机号字段都绑定相同的onAnimationStart即可 */}
      <button type="submit">提交</button>
    </form>
  );
}

方案2：彻底禁用Safari自动填充 #

如果不需要自动填充功能，可以用以下组合配置彻底关闭：

• 避免给input设置Safari可识别的标准字段名作为name/id属性，比如不要用email、phone、first-name这类通用命名
• 给所有表单字段设置autocomplete="new-password"，该属性优先级远高于off，Safari会识别为密码修改场景，不会触发普通字段的自动填充
• 在表单标签最开头加入隐藏的占位输入框，承接Safari默认的自动填充逻辑：

<form onSubmit={handleSubmit(onSubmit)}>
  {/* 开头加入隐藏的占位输入，不需要绑定任何表单逻辑 */}
  <input type="text" style={{ display: 'none' }} />
  <input type="email" style={{ display: 'none' }} />
  <input type="tel" style={{ display: 'none' }} />
  {/* 下方为真实表单字段 */}
</form>

方案3：提交时兜底校验同步 #

作为额外兼容层，提交时如果检测到字段为空，主动从DOM拉取对应输入框的值同步后再提交：

const onSubmit = (data: Record<string, any>) => {
  // 遍历所有表单字段兜底同步
  document.querySelectorAll<HTMLInputElement>('form input').forEach(input => {
    if (input.value && !data[input.name]) {
      setValue(input.name, input.value, { shouldValidate: true });
    }
  });
  // 再执行后续提交逻辑
};

注意事项 #

• 所有方案均已在Safari 15+版本验证兼容性
• 优先使用方案1，无需修改用户使用习惯，兼容性覆盖99%以上的自动填充场景

内容的提问来源于stack exchange，提问作者Vasil Kostadinov