javascript - 防止 Firefox 自动完成任何带有密码字段的表单

Question

我们有一个使用 AngularJS 构建的单页应用程序。像许多应用程序一样，我们有一个登录表单，其中包含一个 input[type=text](电子邮件)和一个 input[type=password](密码)。好吧。 Firefox 保存数据(如果用户确认)并可以在下次自动完成表单。

我们还有一个用于编辑或创建用户的表单。当然也有类型为text 和password 的输入字段。在任何情况下，Firefox 都会为任何用户自动完成这些字段。

我们的用户编辑表单:

<!--span>made by selectize directive: no id, no name<span-->
<input type="text" tabindex="0"></input>
<input
    id="whatever"
    autocomplete="off"
    class="form-control"
    name="hi"
    ng-minlength="settings.loginSettings.passwordMinLength"
    ng-model-options="{debounce: {'default': 500, 'blur': 0}}"
    ng-model="userData.password" 
    ng-required="!userData.id" 
    placeholder="{{ '_settings.password' | translate }}" 
    type="password" />

我们的表单有一个不同于登录表单的 id，它有 autocomplete="off" 属性(which is turned off in FF >= 30，although it is apparently HTML5 standard)和密码字段具有与登录表单中不同的 name 和 id 属性。其他建议，例如再添加一个隐藏的 (style="display: none") 文本输入字段不起作用。

---

我在用户编辑 Controller 中创建了一个非常肮脏的 JS hack，它清空了脏字段和相关的模型字段，但用户确实看到页面上发生了奇怪的事情。

Most discussions这个问题在这里已经很老了，但另一方面，大量的应用程序都有登录表单和用户编辑表单。我想我们在这里遗漏了一些简单的东西？

感谢任何建议!

Answer 1

我通过在真实字段上方添加虚假字段解决了同样的问题。

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

<input id="real_login" type="text" value="" name="real_login"></input>
<input id="real_password" type="password" value="" name="real_password"></input>