阻止浏览器自动填写表单用户名和密码字段答案

【问题标题】：Stop browser from auto filling the form username and password fields阻止浏览器自动填写表单用户名和密码字段
【发布时间】：2014-07-02 01:17:48
【问题描述】：

在 Chrome 浏览器中，我已经保存了用户名和密码。

现在，如果我导航到其他表单并且它包含其他内容的用户名和密码，我保存的表单会自动填充到此处。

我怎样才能阻止这种情况？

【问题讨论】：

Is autocomplete="off" compatible with all modern browsers?的可能重复
@koala_dev 类似问题但不相等

标签： html struts1 auto-populate

【解决方案1】：

当autocomplete=off 不会阻止填写凭据时，使用以下 -

修复浏览器自动填充：只读并将 writeble 设置为焦点（单击和选项卡）。

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

【讨论】：

确实有效。但是很奇怪，如果我需要为其他一些东西设置密码，不支持这个。
经过数小时的搜索后，我终于找到了一个可行的解决方案，以防止表单被浏览器或第 3 方密码管理器自动填写。谢谢！
我添加了一个 onblur 处理程序；否则在 FF 71 中，当您重新访问该字段时，它会提示您。

【解决方案2】：

对于火狐浏览器使用这个：

<input type="text" name="prevent_autofill" id="prevent_autofill" value="" style="display:none;" />
<input type="password" name="password_fake" id="password_fake" value="" style="display:none;" />
<input type="password" name="password" id="password" value="" />

对于 Chrome 浏览器：使用autocomplete="new-password"

【讨论】：

autocomplete="new-password" 现在也适用于 Firefox（版本 77.0.1）

【解决方案3】：

请参考以下内容：
https://www.chromium.org/developers/design-documents/create-amazing-password-forms 和https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands

尝试以下方法：

<form id="login" action="signup.php" method="post">
    <input type="text" autocomplete="username">
    <input type="password" autocomplete="new-password">
    <input type="password" autocomplete="new-password">
    <input type="submit" value="Sign Up!">
</form>

【讨论】：

自动完成标志不会阻止密码管理器提示填写 用户名。
@LawrenceDol 你用的是哪个浏览器？
火狐，当前。
您是否尝试过@Raymond Morphy 的以下答案` 我的评论与 Chrome 浏览器相关，因为问题是针对 chrome 浏览器的:)
不，因为我使用了readonly on/off method。

【解决方案4】：

简单：有一个名为autocomplete 的 HTML5 属性。

只需将其设置为off。

<input autocomplete="off"/>

【讨论】：

这在 Firefox 中不可靠。这里有一些讨论stackoverflow.com/questions/6487970/disable-firefoxs-auto-fill
当您让浏览器记住您的凭据时，它会自动填写密码以帮助您，即使是autocomplete="off"。 AK Square Infomedia 的readonly 回答确实适用于这些情况。非常适合更新个人资料表单，您通常只希望在更改密码时发送密码。
这在 Chrome 中也不起作用。如果浏览器不费心去实现它们，我不知道为什么它们会在 HTML 规范中添加如此好的和有用的特性。

【解决方案5】：

首先尝试将密码字段设置为

autocomplete="new-password"

上述解决方案应该停止自动填写用户名和密码

注意：有时在用户名和密码上设置 autocomplete="off" 可能不起作用

【讨论】：

【解决方案6】：

对于 input/type=text，使用 textarea
对于密码，请使用带有圆形字形字体的文本区域（请参阅https://stackoverflow.com/a/40982531/146457）

<textarea required="required" autocorrect="off" autocapitalize="off" name="username" class="form-control" placeholder="Your username"  rows="1" cols="20" wrap="off"></textarea>
<textarea required="required" autocorrect="off" autocapitalize="off" name="password" class="form-control password" placeholder="Your password"  rows="1" cols="20" wrap="off"></textarea>

@font-face {
  font-family: 'password';
  src: url('css/font/password.woff2') format('woff2'),
       url('css/font/password.woff') format('woff'),
       url('css/font/password.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

textarea.form-control {
  overflow:hidden;
  resize:none;
  height:34px;
}

textarea.form-control.password:valid {
  font-family: 'password';
}

注意事项

Textarea 阻止自动填充
wrap=off/overlow=hidden/rows=1 强制单行显示
所需的伪 css 使占位符有效
您可能需要一些“防止 eventKey=13 / 提交”的东西
在 ffox/chrome/iOS 下运行良好

最后，它变成了一堆骇人听闻的黑客攻击（但它确实有效）

【讨论】：