如何在Ant Design表单中全局禁用浏览器自动填充功能

存在可行实现方案，核心原因是Select、Autocomplete组件底层为原生输入框+模拟下拉结构，不会直接透传组件表层的autoComplete属性到原生输入元素上，可通过以下方式解决：

全局统一配置（推荐） #

直接在Form组件上设置自动填充禁用属性，会作用于表单内所有原生输入元素，不需要单独给每个表单项加配置：

// 优先用new-password，兼容性优于off/none
<Form autoComplete="new-password" {/* 其他Form配置 */}>
  <Form.Item label="输入项">
    <Input />
  </Form.Item>
  <Form.Item label="选择项">
    <Select {/* 不需要单独加autoComplete */} />
  </Form.Item>
  <Form.Item label="自动完成项">
    <Autocomplete {/* 不需要单独加autoComplete */} />
  </Form.Item>
</Form>

该方案对所有AntD表单项都生效，不需要额外调整组件逻辑

单个组件单独配置 #

如果仅需要给部分Select/Autocomplete禁用自动填充，可通过inputProps（v5版本）或fieldProps（v4低版本）属性将autoComplete透传给底层原生输入框：

// Select组件配置
<Select
  inputProps={{ autoComplete: "new-password" }}
  {/* 其他Select配置 */}
/>

// Autocomplete组件配置
<Autocomplete
  inputProps={{ autoComplete: "new-password" }}
  {/* 其他Autocomplete配置 */}
/>

极端兼容方案 #

针对部分老旧浏览器不识别autoComplete属性的场景，可在表单开头插入两个隐藏的 dummy 输入框，诱导浏览器将自动填充内容写入这两个无效元素：

<Form>
  <input type="text" style={{ display: "none" }} />
  <input type="password" style={{ display: "none" }} />
  {/* 后续正常写所有表单项 */}
</Form>

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