如何禁用Chrome自动填充基于MUI组件的Formik表单

针对Chrome自动填充用户名/密码字段的问题，常规的autoComplete="off"经常因为React组件封装、Chrome自身填充逻辑失效，试试下面几个实际有效的方案：

方案1：使用自定义autoComplete属性值 #

Chrome会对username/password这类标准字段名优先填充，改用非标准的属性值可以绕过这个逻辑：

import { TextField } from '@mui/material';
import { useFormik } from 'formik';

const MyForm = () => {
  const formik = useFormik({
    initialValues: { username: '', password: '' },
    onSubmit: values => console.log(values),
  });

  return (
    <form {...formik.getFormProps()}>
      <TextField
        name="username"
        label="用户名"
        autoComplete="nope-username" {/* 自定义值替代off */}
        {...formik.getFieldProps('username')}
        fullWidth
        margin="normal"
      />
      <TextField
        name="password"
        label="密码"
        type="password"
        autoComplete="new-password" {/* 密码字段专用值 */}
        {...formik.getFieldProps('password')}
        fullWidth
        margin="normal"
      />
      <button type="submit">提交</button>
    </form>
  );
};

方案2：添加隐藏的假输入框迷惑自动填充 #

Chrome会优先匹配页面中第一个符合username/password字段名的输入框，在真实输入框前添加隐藏的假字段，让自动填充落到假框里：

<form {...formik.getFormProps()}>
  {/* 隐藏的假输入框 */}
  <input
    type="text"
    style={{ display: 'none', visibility: 'hidden', position: 'absolute' }}
    name="fake-username"
    autoComplete="username"
  />
  <input
    type="password"
    style={{ display: 'none', visibility: 'hidden', position: 'absolute' }}
    name="fake-password"
    autoComplete="password"
  />

  {/* 真实输入框 */}
  <TextField
    name="username"
    label="用户名"
    autoComplete="off"
    {...formik.getFieldProps('username')}
    fullWidth
    margin="normal"
  />
  <TextField
    name="password"
    label="密码"
    type="password"
    autoComplete="off"
    {...formik.getFieldProps('password')}
    fullWidth
    margin="normal"
  />

  <button type="submit">提交</button>
</form>

方案3：Formik挂载后手动清空填充值 #

如果Chrome是在组件挂载后才完成自动填充，可以用useEffect在表单初始化后重置字段值：

import { useEffect } from 'react';
import { useFormik } from 'formik';

const MyForm = () => {
  const formik = useFormik({
    initialValues: { username: '', password: '' },
    onSubmit: values => console.log(values),
  });

  useEffect(() => {
    // 组件挂载后清空自动填充的内容，第二个参数false表示不触发校验
    formik.setFieldValue('username', '', false);
    formik.setFieldValue('password', '', false);
  }, [formik]);

  return (
    // 表单渲染部分...
  );
};

注意事项 #

• MUI的TextField会把autoComplete属性传递到底层的input元素，但要确保没有被Formik的getFieldProps覆盖（通常不会，但可以检查最终渲染的DOM元素）。
• 不同Chrome版本的自动填充逻辑可能有差异，如果一个方案无效，试试组合多个方案（比如方案1+方案2）。

内容的提问来源于stack exchange，提问作者Naveenkumar M