在 React 中关闭输入的自动完成

作者

在 React 中关闭输入的自动完成

Turn off autocomplete on an Input in React

要在 React 中关闭输入字段的自动完成，请将autoComplete
prop 设置为offor new-password，例如<input autoComplete="off" />。autoComplete设置为时
off，不允许浏览器自动为字段输入值。

应用程序.js
export default function App() {
  return (
    <div>
      {/* 👇️ disable autocomplete on input fields */}
      <input type="text" id="message" autoComplete="off" />

      <input type="password" id="password" autoComplete="new-password" />

      <hr />

      {/* 👇️ disable autocomplete for entire form  */}
      <form autoComplete="off">
        <input type="text" id="first" />

        <input type="text" id="last" />
      </form>
    </div>
  );
}

反应自动完成关闭

我们可以将
autoComplete 属性设置
为off或new-password关闭输入字段的自动完成功能。

请注意，多词道具在 React 中是驼峰式的autoComplete，而不是
autocomplete。

当该autoComplete属性设置为off时，不允许浏览器自动为该字段输入值。

应用程序.js
<input type="text" id="message" autoComplete="off" />

但是，在大多数浏览器中，设置autoComplete为off不会阻止密码管理器自动填写表单中的值。

new-password可以设置该值以避免意外填写现有密码或提供帮助以创建安全密码。

应用程序.js
<input type="password" id="password" autoComplete="new-password" />

如果你想关闭表单中所有字段的自动完成，你也可以autoComplete直接off在元素上设置。form

应用程序.js
<form autoComplete="off">
  <input type="text" id="first" />

  <input type="text" id="last" />
</form>

当autoCompleteprop 设置为off表单级别时，不允许浏览器自动为表单中的任何字段输入值。

–

发表评论