如何禁用 mui 文本字段自动完成？

Question

我正在使用最新版本的 mui。 我有一个包含邮政编码字段的用户联系信息表单。 如果值为空，我不希望此字段自动完成，但它会随着保存在浏览器中的电子邮件自动完成。 这是我到目前为止所尝试的：

• 自动完成=“关闭”
• 自动完成=“关闭”
• 自动完成=“不”

这是我的文本字段的代码：

<Textfield
    name="zipCode"
    id="zipCode"
    label="Zipcode *"
    autoComplete='nope'
    value={addressDetails.zipCode || ""}
    onChange={updateAddressDetails}
    error={displayError(validationErrors?.zipCode)}
    helperText={validationErrors?.zipCode}
    fullWidth
    />

下面是我的表格截图：

虽然， autoComplete='nope' 适用于城市等其他领域，但不适用于邮政编码。

Answer 1

我怀疑您的邮政编码字段的问题是自动完成是自动完成的autoComplete?: string | undefined; autoComplete?: string | undefined; 所以它可能不适用于数字。

编辑：我看到它会通过您的电子邮件自动完成。 尝试添加这个：

    <Textfield
        name="zipCode"
        id="zipCode"
        label="Zipcode *"
        inputProps={{ autoComplete: 'off' }}
        value={addressDetails.zipCode || ""}
        onChange={updateAddressDetails}
        error={displayError(validationErrors?.zipCode)}
        helperText={validationErrors?.zipCode}
        fullWidth
    />

Answer 2

正如mui 文档所说：

默认情况下，该组件使用 autoComplete="off" 属性禁用输入自动完成功能（记住用户在前一个会话中为给定字段键入的内容）。

所以代码看起来像这样：

<TextField
  {...params}
  inputProps={{
    ...params.inputProps,
    autoComplete: 'off',
  }}
/>

Answer 3

错误已解决！ 我找出了出现此错误的原因，这是一个不同的用例。 我在联系信息表单旁边有一个更新密码表单，该更新密码表单包含三个字段：

• 当前密码
• 新密码
• 确认密码

因此，发生的事情是当前密码字段自动填充了保存在浏览器中的密码，因为该字段的类型是“密码”，并且邮政编码字段就在当前密码字段的上方，因此它被填充了已保存密码的电子邮件。

我需要做的是关闭密码字段的自动完成功能，这样带有电子邮件地址的邮政编码字段的自动完成功能也会停止。 我尝试了以下选项来停止密码自动完成，但没有奏效：

- autoComplete="nope"

- autoComplete="off"

- inputProps = {{
     autoComplete: "off"
}}

- inputProps = {{
     autoComplete: "nope"
}}

实际工作的是：

inputProps={{
     autoComplete: 'new-password'
}}

通过这样做，我的邮政编码字段也自动完成了电子邮件地址（这很难理解）。

感谢为您提供帮助而发布答案的人，您的答案是正确的，但我有一个完全不同的用例，这就是为什么没有解决方案有效的原因！