禁用Chrome中的表单自动填充，而不禁用自动完成[重复]

Question

我们如何禁用Chrome的自动填充功能在某些

同时，我需要启用自动完成功能，这样用户仍然可以通过单击输入或键入来查看建议列表。这能做到吗？

编辑：如果您觉得有必要使用纯Javascript或jQuery，或者您觉得这会使您的解决方案更简单，那么可以随意使用纯Javascript或jQuery。




Answer 1

修复：防止浏览器自动填充

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

//更新结束

说明此代码段通过设置只读模式并更改为可写（如果用户聚焦于此输入字段（焦点包含鼠标单击和通过字段的制表符）来工作，而不是填充空白空间或加载窗口功能。

不需要jQuery，纯JavaScript。

Answer 2

有点晚了，但这里有一个我的傻瓜式解决方案，它对注册/注册页面这样的页面很有用，用户必须输入新密码。

<form method="post">
    <input type="text" name="fname" id="firstname" x-autocompletetype="given-name" autocomplete="on">
    <input type="text" name="lname" id="lastname" x-autocompletetype="family-name" autocomplete="on">
    <input type="text" name="email" id="email" x-autocompletetype="email" autocomplete="on">
    <input type="password" name="password" id="password_fake" class="hidden" autocomplete="off" style="display: none;">
    <input type="password" name="password" id="password" autocomplete="off">
</form>

Chrome将检测两个密码输入，并且不会自动填充密码字段。但是，字段id="password_fake"one将通过CSS隐藏。所以用户只能看到一个密码字段。

我还添加了一些额外的属性“x-autocompletetype”，这是chrome实验性的特定自动填充功能。根据我的例子，chrome将自动填写名字、姓氏和电子邮件地址，而不是密码字段。

Answer 3

以下是您想要的魔法：

    autocomplete="new-password"

Chrome有意忽略自动完成="off"和自动完成="false"。但是，他们将new-ode作为特殊子句放入，以阻止自动填充新密码表单。

我把上面这一行放在我的密码输入中，现在我可以编辑表单中的其他字段，密码不会自动填充。