我遇到了“现在登录或注册”模式窗口的问题，如果用户已经将他们的凭据保存到浏览器中，这是一个问题。sign in和register字段都被填充了，所以我可以用下面的angular js指令来清除它们:

(function () { "use strict"; var directive = function ($timeout) { return { restrict: "A", link: function (scope, element, attrs) { $timeout(function () { element.val(" "); $timeout(function () { element.val(""); }); }); } }; }; angular.module("app.directives").directive("autofillClear", ["$timeout", directive]); }());

它基本上与之前使用jquery的一些答案相同，但以一种角度的方式完成。

有时即使autocomplete=off也不能防止在错误的字段中填写凭据。

一个解决方法是禁用浏览器自动填充使用只读模式，并设置可写焦点:

 <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/

/ / UpdateEnd

解释:浏览器自动填充凭据错误的文本字段?

错误地填充输入，例如用电子邮件地址填充电话输入

有时我在Chrome和Safari浏览器上注意到这种奇怪的行为，当密码字段以相同的形式出现时。我猜，浏览器会寻找一个密码字段来插入您保存的凭证。然后它自动将用户名填充到最近的textlike输入字段，在DOM中出现在密码字段之前(只是由于观察而猜测)。由于浏览器是最后一个实例，你无法控制它，

上面的这个即时修复对我来说是有效的。

1月20日chrome更新

上面的解决方案都不起作用，包括添加假字段或设置autocomplete=new-password。是的，这些chrome浏览器不会自动完成，但当你输入密码字段时，它会再次建议密码。

我发现，如果你删除密码字段，然后添加它再次没有id，然后chrome不会自动填充它，也不建议输入密码。

使用类来获取密码值而不是id。

对于firefox来说，仍然需要添加一个虚拟元素。

这个解决方案还允许/禁止基于标志的自动补全:

html:

<!-- form is initially hidden, password field has a dummy id and a class 'id' -->
<form id="loginForm" style="display:none;">
   <span>email:</span><input type="text" placeholder="Email" id="loginEmailInputID"/>
   <span>Password:</span><input class="loginPasswordInput" type="password" placeholder="Password" id="justForAutocomplete"/>
</form>

页面加载:

function hideAutoComplete(formId) {
    let passwordElem=$('#'+formId+' input:password'), prev=passwordElem.prev();
    passwordElem.remove();
    prev.after($('<input type="password" style="display:none">'), passwordElem.clone().val('').removeAttr('id'));
}

if (!allowAutoComplete) hideAutoComplete('loginForm');
$('#loginForm').show();

当你需要密码时:

$('.loginPasswordInput').val();

上次我检查谷歌在2017年1月更新了他们的自动填充，对我有效的解决方案是添加另一个输入，并在它被填充后隐藏它。

 <input type="text" id="phone_number" name="phone_number" value="">
 <input type="text" id="dummy_autocomplete">


<script type="text/javascript">
        $('#dummy_autocomplete').hide();
</script>

Mike Nelsons提供的解决方案在Chrome 50.0.2661.102 m中不工作。 简单地添加一个与display:none设置相同类型的输入元素不再禁用本机浏览器自动完成功能。现在需要复制希望禁用自动完成的输入字段的name属性。

此外，为了避免输入字段在表单元素中重复，应该在不显示的元素上放置一个disabled。这将阻止该元素作为表单操作的一部分提交。

<input name="dpart" disabled="disabled" type="password" style="display:none;">
<input name="dpart" type="password">
<input type="submit">

尝试在值中添加一个空格:

<input type="email" name="email" value="&nbsp;">
<input type="password" name="password" value="&nbsp;">

chrome 54.0.2840.59