经过大量的挖掘，我发现Chrome上的自动完成下拉菜单(版本83.0.4103.116)不显示，当我们删除输入标签上的名称和id属性 如。代码如下所示 < div > < span > 如果没有在输入标签上设置名称和id属性，则自动完成关闭工作 < input type = " text " / > < / span > < span > 自动完成将在这里工作，因为id属性已设置 <input id="name" type="text"/> < / span > < / div >

除了给它一个自动补全的假字段外，所有的解决方案都不起作用。我做了一个React组件来解决这个问题。

import React from 'react'

// Google Chrome stubbornly refuses to respect the autocomplete="off" HTML attribute so
// we have to give it a "fake" field for it to autocomplete that never gets "used".

const DontBeEvil = () => (
  <div style={{ display: 'none' }}>
    <input type="text" name="username" />
    <input type="password" name="password" />
  </div>
)

export default DontBeEvil

看起来这是固定的!参见https://codereview.chromium.org/1473733008

TL;DR:告诉Chrome这是一个新的密码输入，它不会提供旧的密码作为自动补全建议:

<input type="password" name="password" autocomplete="new-password">

---

由于设计决定，Autocomplete ="off"不起作用——大量研究表明，如果用户可以将密码存储在浏览器或密码管理器中，他们就会有更长时间和更难破解密码。

自动完成的规范已经改变，现在支持各种值，使登录表单更容易自动完成:

<!-- Auto fills with the username for the site, even though it's email format -->
<input type="email" name="email" autocomplete="username">

<!-- current-password will populate for the matched username input  -->
<input type="password" autocomplete="current-password" />

如果你不提供这些Chrome浏览器仍然试图猜测，当它做它忽略autocomplete="off"。

解决方案是密码重置表单也存在自动完成值:

<label>Enter your old password:
    <input type="password" autocomplete="current-password" name="pass-old" />
</label>
<label>Enter your new password:
    <input type="password" autocomplete="new-password" name="pass-new" />
</label>
<label>Please repeat it to be sure:
    <input type="password" autocomplete="new-password" name="pass-repeat" />
</label>

你可以使用autocomplete="new-password"标志告诉Chrome浏览器不要猜测密码，即使它已经为这个网站存储了一个。

Chrome还可以直接使用凭据API管理网站的密码，这是一个标准，最终可能会得到普遍支持。

我用另一种方法解决了。你可以试试这个。

<input id="passfld" type="text" autocomplete="off" />
<script type="text/javascript">
// Using jQuery
$(function(){                                               
    setTimeout(function(){
        $("input#passfld").attr("type","password");
    },10);
});


// or in pure javascript
 window.onload=function(){                                              
    setTimeout(function(){  
        document.getElementById('passfld').type = 'password';
    },10);
  }   
</script>

防止用户名(或电子邮件)和密码自动完成:

<input type="email" name="email"><!-- Can be type="text" -->
<input type="password" name="password" autocomplete="new-password">

---

防止自动完成字段(可能不起作用):

<input type="text" name="field" autocomplete="nope">

解释:

Autocomplete仍然适用于<input>，尽管有Autocomplete ="off"，但你可以将off更改为随机字符串，如nope。

---

其他禁用字段自动补全的“解决方案”(这不是正确的方法，但它是有效的):

1.

HTML:

<input type="password" id="some_id" autocomplete="new-password">

JS (onload):

(function() {
    var some_id = document.getElementById('some_id');
    some_id.type = 'text';
    some_id.removeAttribute('autocomplete');
})();

或者使用jQuery:

$(document).ready(function() {
    var some_id = $('#some_id');
    some_id.prop('type', 'text');
    some_id.removeAttr('autocomplete');
});

---

2.

HTML:

<form id="form"></form>

JS (onload):

(function() {
    var input = document.createElement('INPUT');
    input.type = 'text';
    document.getElementById('form').appendChild(input);
})();

或者使用jQuery:

$(document).ready(function() {
    $('<input>', {
        type: 'text'
    }).appendTo($('#form'));
});

---

使用jQuery添加多个字段:

function addField(label) { var div = $('<div>'); var input = $('<input>', { type: 'text' }); if(label) { var label = $('<label>', { text: label }); label.append(input); div.append(label); } else { div.append(input); } div.appendTo($('#form')); } $(document).ready(function() { addField(); addField('Field 1: '); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="form"></form>

---

适用于:

铬:49 + Firefox: 44 +