如果表单是通过javascript生成的，那么通过在输入中添加“display: none;”来隐藏它的方法对我来说就行不通了。

所以我把它们放在视线之外，让它们隐形:

<input style="width:0;height:0;opacity:0;position:absolute;left:-10000px;overflow:hidden;" type="text" name="fakeusernameremembered"/>
<input style="width:0;height:0;opacity:0;position:absolute;left:-10000px;overflow:hidden;" type="password" name="fakepasswordremembered"/>

我也遇到过同样的问题。这里是禁用自动填充用户名和密码的Chrome解决方案(仅在Chrome上测试)

    <!-- Just add this hidden field before password as a charmed solution to prevent auto-fill of browser on remembered password -->
    <input type="tel" hidden />
    <input type="password" ng-minlength="8" ng-maxlength="30" ng-model="user.password" name="password" class="form-control" required placeholder="Input password">

Finally I think I came with a decent solution. Understanding better how the dropdown works with Chrome helped :) Basically, the dropdown will be displayed when you focus the input and when you generate a mouse down event when you are typing an entry which matches with what Chrome has in memory. Keeping that in mind, and that Chrome does it for certain inputs when they have default names like "name", "email", etc. then we just need to remove the name when the dropdown is going to be displayed and add it back after :) I wanted to use a solution which can make it work just by adding the attribute autocomplete off. I thought it made sense. This is the code:

解决方案1

jQuery('body').on('mousedown','[name="name"][autocomplete="off"], [name="email"][autocomplete="off"]',function(e){
    e.stopImmediatePropagation();
    if(typeof this.currentName =="undefined")
        this.currentName=jQuery(this).attr('name');
    jQuery(this).attr('name','');
});

jQuery('body').on('blur','[autocomplete="off"]',function(e){
    e.stopImmediatePropagation();
    jQuery(this).attr('name',this.currentName);
});

解决方案2(我最喜欢的一个)

The solution I described above will remove the name of the input until we remove the focus (blur), in that moment it will put the original name back. But might happen that we are interested on having access to the input through its name attribute while we are typing. Which means that we need to put the name back right after each input. This solution, basically is based on the first solution. In this case, we will add the name on key down, and put it back on keyup. I think this is more neat for compatibility with what the "autocomplete off" behaviour should be. Anyway this is the code:

jQuery('body').on('mousedown keydown','[name="name"][autocomplete="off"], [name="email"][autocomplete="off"]',function(e){
    e.stopImmediatePropagation();
    if(typeof this.currentName =="undefined")
        this.currentName=jQuery(this).attr('name');
    jQuery(this).attr('name','');
});
jQuery('body').on('blur keyup','[autocomplete="off"]',function(e){
    e.stopImmediatePropagation();
    if(typeof this.currentName !="undefined")
        jQuery(this).attr('name',this.currentName);
});

请注意，对于解决方案1和2，我只采用输入名称为“name”和“email”的情况。对于任何其他情况下，这个属性使Chrome生成下拉，你将不得不添加它在选择器的鼠标下拉事件。

解决方案3

这个解决方案要复杂得多。我没有意识到我们试图纠正的行为只是基于那些带有特定名称的输入，如“姓名，电子邮件等”。这种解决方案的方法是在这种情况下，Chrome显示的其他名称，我们不知道一个先验。这将是一个非常通用的解决方案。我不像其他两个那样喜欢，主要是因为当我们按下删除键时，可能会有一个小闪烁。我会在下面解释。

我发现，下拉框出现在第二次点击输入后，而不是第一次点击时，当你第一次聚焦在输入上时。我为所有这些元素绑定了一个“mousedown”事件，其中处理程序基本上检测它是否已经聚焦在输入上，如果它检测到另一个“鼠标向下”，强制一个.blur()，然后是.focus()，防止第二次点击时的下拉。我希望，这是清楚的，以防万一，这是我使用的代码:

jQuery('body').on('mousedown','[autocomplete="off"]',function(e){
    e.stopImmediatePropagation();
    if(jQuery(this).is(':focus')) {
        jQuery(this).blur();
        jQuery(this).focus();
    }
});

In the other hand, in order to prevent the dropdown while you are typing in case it matches with Chrome suggestions... This is a little bit tricky. I just decided to replace the default behaviour of an input while user types. The dropdown evaluates the input on mouse down, so I prevent the default behaviour for alphanumerics, space, etc. The only problem is with Command,Ctrl and delete. For this case I had to bind also an event on mouse up. It allows the default behaviour in the first two cases so you can make copy, and paste, or select all. In the case of the delete, I have to allow the default behaviour, but if after deleting a character the input matches with Chrome suggestions, then again it was showing the dropdown. For this case I had to use the same trick of blur and focus. The only inconvenience I found on this is that since we are cancelling the behaviour on keyup, and chrome tries to show it on keydown, there is a small flicker. Anyway, this is the best I could do. Probably it will require for filtering of characters at one point. I just added the conditions made more sense for now. This is the second part of the code:

jQuery('body').on('keydown','[autocomplete="off"]',function(e){
    e.stopImmediatePropagation();
    var ctrlKey = 17,cmKey = 91;
    var charCode = e.which || e.keyCode;

    if(charCode!=16 && this.commandDown != true && this.ctrlDown != true && ((charCode>47 && charCode<58)||(charCode>64 && charCode<91)||(charCode>96 && charCode<123)||charCode==0 || charCode==32)){ 
        e.preventDefault();
        var charStr = String.fromCharCode(charCode);
        if(!e.shiftKey)
            charStr = charStr.toLowerCase(charStr);
        $(this).val($(this).val() + charStr);
    }else{
        if (charCode == cmKey) this.commandDown = true;
        if (charCode == ctrlKey) this.ctrlDown = true;
    }
});
jQuery('body').on('keyup','[autocomplete="off"]',function(e){
    e.stopImmediatePropagation();
    var allowed=[8];//Delete
    var ctrlKey = 17,cmKey = 91;
    var charCode = e.which || e.keyCode;

    if (charCode == cmKey) {this.commandDown = false};
    if (charCode == ctrlKey) {this.ctrlDown = false};
    if(allowed.indexOf(charCode)>=0 || (this.commandDown!=false && this.ctrlDown!=false)){
        jQuery(this).blur();
        jQuery(this).focus();
}

就像我说过的，这个解要复杂得多。这是我使用的第一个，直到我意识到下拉列表只出现在某些输入名称上。

抱歉写了这么多，我只是想确保一切都清楚。我希望这能有所帮助。

不同的解决方案，基于webkit。如前所述，任何时候Chrome发现一个密码字段，它自动完成电子邮件。AFAIK，这与autocomplete = [whatever]无关。

为了避免这种情况，将输入类型更改为文本，并以任何您想要的形式应用webkit安全字体。

.secure-font{
-webkit-text-security:disc;}

<input type ="text" class="secure-font">

从我所看到的，这至少是安全的输入类型=密码，它的复制和粘贴安全。然而，它是脆弱的，通过删除将删除星号的样式，当然input type = password可以很容易地在控制台中更改为input type = text，以显示任何自动填充的密码，所以它是非常相同的。

我的黑客测试在Chrome 48:

由于Chrome试图找出字段的类型，它是通过查看诸如id或名称属性的<输入>，但也在相关的<标签>内容，你只需要找到这些无意义的名字。

对于id和名称，很容易选择这里没有列出的其他内容。

对于标签，我在中间插入了一个不可见的<span>，例如对于一个城市(它会打乱我的位置自动完成):

<span>Ci<span style="display:none">*</span>ty</span>

完整的工作示例:

<!DOCTYPE html> <html> <body> <form method="post" action="/register"> <div> <label for="name">Name</label> <input id="name" type="text" name="name" /> </div> <div> <label for="email">Email</label> <input id="email" type="text" name="email" /> </div> <div> <label for="id1">City</label> <input id="id1" type="text" name="id1" /> <-- STILL ON :( </div> <div> <label for="id2">Ci<span style="display:none">*</span>ty</label> <input id="id2" type="text" name="id2" /> <-- NOW OFF :) </div> </form> </body> </html>

没有一个解决方案对我有效。最后，在花了好几个小时后，我想出了这个ReactJS的解决方案。

在FireFox 54.0.1, Chrome 61.0.3163.100, Mac OS 10.13上测试

我保持类型=“文本”，并将其更改为onChange事件上的相关类型。

例: HTML:

<输入类型=“文本”占位符=“电子邮件”/>

JS:

setAttr2: function(e){
    var value = e.target.value;
    if(value.length){
      e.target.setAttribute('type', 'email')
    } else {
      e.target.setAttribute('type', 'text')
    }
  }