在 React.js 上禁用输入自动完成

Question

我知道这已经被问了 1000 次，但所有的答案都说相同，但对我来说根本不起作用。

这是我的输入字段：

  <input
    className={
      required ? "input-field__input input-field__input--required" : "input-field__input"
    }
    id={placeHolder}
    type={type}
    placeholder={placeHolder}
    autoComplete="new-password"
    value={value || ""}
    onChange={e => handleChange(e.target.value)}
  />

我试过autoComplete="new-password" , autocomplete="new-password" , autoComplete="none" & autocomplete="none"但无论我试过哪一​​个，chrome 都会根据过去的输入向我显示建议. 还有其他事情可能会影响它吗？

Answer 1

在表单标签而不是输入标签中添加 autoComplete="off"。 以下是要遵循的代码：-

  <form autoComplete="off">
          <input id="input" type="text" placeholder="Enter Text" />
  </form>

{autoComplete} 语法，即 React 的驼峰式，html 后跟 {autocomplete} 小写。 JSX 也将其转换为小写。 您可以看到渲染的 DOM。

这是演示：- https://codepen.io/gahlotbaba/pen/JjdzmmB?editors=0111

希望能帮助到你。

Answer 2

您可以在密码上方添加一个虚拟的隐形输入

    <div style={{ height: 0px; overflow: hidden; background: transparent; }}>
        <input type="password"></input>
    </div>

Answer 3

autoComplete="new-password"应该适合你。

这将删除自动完成

更多关于这里

https://github.com/react-toolbox/react-toolbox/issues/1795