阻止自动填充帐号input

[XXHolic]

场景

在维护一个功能的时候，多个帐号切换登录的时候，微信内 h5 页面自动填充的帐号是错误的，需要阻止这种行为。

阻止自动填充帐号 input

从网上找了下面几种方法，但不可行的方法：

• 使用假的 input 让浏览器去填充，设置 display:none 或者 type:hidden 。
• 在 input 使用属性 autocomplete="off" 。
• 页面加载完后，用 js 将其置空。

找到尝试后可行的方法：

• 相关的 input 不使用 id，获取值的时候用 class 来获取。

手机测试页面如下：

测试页面中使用了 form，为了方便测试，将信息提交给了百度，微信内再次进入的时候，就没有填充密码。

PC 端阻止密码填充

在 PC 端尝试可行的方法有：

• 在 input 使用属性 autocomplete="off"，在浏览器 chrome(63.0.3239.132)、火狐（59.0.2）、360（9.1.0.410/55.0.2883.87）中测试过可行。

2019.02.16

经 @Maxxxz 提醒上述方式在最新 PC 的 Chrome 和 Firefox 都无效，于是开始尝试新的方法。

尝试后不可行的方法:

• type="password" 的 input，设置 autocomplete="new-password"，此方法 Chrome 有效，但 Firefox 无效。
• form 添加 autocomplete="off"。

尝试后可行的方法：

• 将 type="password" 的 input，改成 type="text"，获取焦点时改变 type。

<input type="text" name="password" onfocus="this.type='password'">

windows 和 Mac 中测试可行的浏览器有：

• Chrome-72.0.3626.109（64位，正式版本），Chrome-71.0.3578.98（64位，正式版本）
• Firefox-65.0.1 (64 位)
• macOS（10.14.3）中 Safari-12.0.3 (14606.4.5)

这是测试 示例。

欢迎补充~~~

样式重置

如果使用自动填充，但要去掉选中帐号后的黄色背景，使用样式：

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
}

参考

• http://www.cnblogs.com/huangtailang/p/5257631.html
• https://blog.csdn.net/theFrontCalf/article/details/78962123
• https://blog.csdn.net/QQ164881500/article/details/79271318
• https://blog.csdn.net/jiandan1127/article/details/80626605

[mice33]

碰到同样问题，autocomplete="off" autocomplete="false" autocomplete="new-password" 在微信中都不行

[XXHolic]

我这里提到的方法在你的应用场景下，是否有效果？ @mice33

[Maxxxz]

chrome64+有试过不

[XXHolic]

chrome64+有试过不

@Maxxxz 已更新，你再试下示例是否正常。感谢指正。