固定的只需在实际输入字段上方添加

https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion-MDNhttps://medium.com/paul-jaworski/turning-off-autocomplete-in-chrome-ee3ff8ef0908-中等在EDGE、Chrome（最新版本63）、Firefox Quantum（57.0.4 64-бит）、Firefox（52.2.0）上测试假字段是chrome/opera自动填充错误字段的一种解决方法

 const fakeInputStyle = {opacity: 0, float: 'left', border: 'none', height: '0', width: '0'}

 <input type="password" name='fake-password' autoComplete='new-password' tabIndex='-1' style={fakeInputSyle} />

<TextField
  name='userName'
  autoComplete='nope'
  ... 
/>

<TextField
      name='password'
      autoComplete='new-password'
      ... 
    />

您可以在输入控件中使用autocomplete=off来避免自动完成

例如：

<input type=text name="test" autocomplete="off" />

如果上面的代码不起作用，那么也尝试添加这些属性

autocapitalize="off" autocomplete="off"

or

将输入类型属性更改为type=“search”。谷歌不会对搜索类型的输入应用自动填充。

我通过添加两个假输入并赋予它们绝对位置来阻止Chrome 66自动填充：

<form style="position: relative">
  <div style="position: absolute; top: -999px; left: -999px;">
    <input name="username" type="text" />
    <input name="password" type="password" />
  </div>
  <input name="username" type="text" />
  <input name="password" type="password" />

起初，我尝试添加display:none；但Chrome忽略了这些输入，并自动填充可见的输入。

有时，即使autocomplete=off也无法阻止将凭据填写到错误的字段中，而不是用户或昵称字段。

除了apinstein关于浏览器行为的帖子之外，还有一个变通方法。

修复浏览器自动填充为只读，并在焦点上设置为可写（单击并选项卡）

 <input type="password" readonly
     onfocus="this.removeAttribute('readonly');"/>

更新：

Mobile Safari在字段中设置光标，但不显示虚拟键盘。新的修复程序与以前一样，但它处理虚拟键盘：

<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
    this.removeAttribute('readonly');
    // fix for mobile safari to show virtual keyboard
    this.blur();    this.focus();  }" />

现场演示https://jsfiddle.net/danielsuess/n0scguv6/

//更新结束

因为浏览器自动将凭据填充到错误的文本字段！？

我注意到在Chrome和Safari上，当相同的表单中有密码字段时，会出现这种奇怪的行为。我猜浏览器会寻找一个密码字段来插入您保存的凭据。然后它会自动填充（只是由于观察而猜测）最近的类似文本的输入字段，该字段出现在DOM中的密码字段之前。因为浏览器是最后一个实例，您无法控制它。

上面的这个只读修复对我有用。

不要使用JAVASCRIPT修复此问题！！

首先使用HTML解决此问题，以防浏览器未使用脚本、无法使用您的脚本版本或脚本已关闭。请始终在HTML之上最后一层脚本。

对于具有“text”类型属性的常规输入表单字段，请在元素上添加autocomplete=“off”。由于用户浏览器覆盖设置，这可能在现代HTML5浏览器中不起作用，但它会照顾到许多旧浏览器，并停止大多数浏览器中的自动完成下拉选项。注意，我还包括了所有其他可能会让用户感到不快的自动完成选项，如autocapitalize=“off”、autocorrect=“off”和spellcheck=“false”。许多浏览器不支持这些功能，但它们增加了额外的“附加”功能，这会让数据输入人员感到烦恼。注意，例如，如果用户的浏览器设置为启用了自动填充，Chrome会忽略“关闭”。因此，实现浏览器设置可以覆盖此属性。

例子：

<input type="text" id="myfield" name="myfield" size="20" value="" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" tabindex="0" placeholder="Enter something here..." title="Enter Something" aria-label="Something" required="required" aria-required="true" />

对于用户名和密码输入类型字段，对于触发“关闭”功能的更具体的自动完成属性，浏览器的支持有限。用于登录的文本输入上的autocomplete=“username”将迫使某些浏览器重置并删除自动完成功能。autocomplete=“new password”将尝试使用“password”类型输入字段对密码执行相同操作。（见下文）。然而，这些是特定浏览器的专有技术，在大多数情况下都会失败。不支持这些功能的浏览器包括Internet Explorer 1-11、许多Safari和Opera桌面浏览器，以及一些版本的iPhone和Android默认浏览器。但它们提供了额外的力量来尝试并强制删除自动完成。

例子：

<input type="text" id="username" name="username" size="20" value="" autocomplete="username" autocapitalize="off" autocorrect="off" spellcheck="false" tabindex="0" placeholder="Enter username here..." title="Enter Username" aria-label="Username" required="required" aria-required="true" />

<input type="password" id="password" name="password" size="20" minlength="8" maxlength="12" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,12}" value="" autocomplete="new-password" autocapitalize="off" autocorrect="off" spellcheck="false" tabindex="0" placeholder="Enter password here..." title="Enter Password: (8-12) characters, must contain one number, one uppercase and lowercase letter" aria-label="Password" required="required" aria-required="true" />

现在寻找更好的解决方案！

由于标准机构和浏览器对HTML5的支持分散，许多现代HTML5属性在许多浏览器中都失败了。所以，一些孩子转向脚本来填补这些漏洞。但这是懒惰的编程。使用JavaScript隐藏或重写HTML会使情况变得更糟，因为您现在有一层又一层的脚本依赖关系，再加上HTML补丁。避免这种情况！

要在表单和字段中永久禁用此功能，最好的方法是每次在“input”元素上创建一个自定义的“id”/“name”值，使用一个唯一的值，如连接到字段id和name属性的日期或时间，并确保它们匹配（例如“name=password_｛date｝”）。

<input type="text" id="password_20211013" name="password_20211013" />

这破坏了愚蠢的浏览器自动完成选择算法，该算法会嗅探触发这些字段过去值的匹配名称。通过这样做，浏览器无法将以前表单数据的缓存与您的匹配。它将强制关闭“自动完成”，或显示空白列表，并且不再显示任何以前的密码！在服务器端，您可以创建这些自定义输入“命名”字段，并通过简单地解析id/name的第一部分，从用户浏览器的响应中识别和提取正确的字段。例如“password_”或“username_”等。当字段的“name”值出现时，只需解析第一部分（“password_{date}”）并忽略其余部分，然后在服务器上提取值。

容易的

<input autocomplete="off" aria-invalid="false" aria-haspopup="false" spellcheck="false" />

我发现它在所有浏览器上都适用。当我只使用自动完成时，它不起作用，除非我组合了您看到的所有属性。此外，我还从谷歌表单输入字段获得了解决方案