Open XXHolic opened 6 years ago
在维护一个功能的时候,多个帐号切换登录的时候,微信内 h5 页面自动填充的帐号是错误的,需要阻止这种行为。
从网上找了下面几种方法,但不可行的方法:
input
display:none
type:hidden
autocomplete="off"
找到尝试后可行的方法:
id
class
手机测试页面如下:
测试页面中使用了 form,为了方便测试,将信息提交给了百度,微信内再次进入的时候,就没有填充密码。
form
在 PC 端尝试可行的方法有:
经 @Maxxxz 提醒上述方式在最新 PC 的 Chrome 和 Firefox 都无效,于是开始尝试新的方法。
尝试后不可行的方法:
type="password"
autocomplete="new-password"
尝试后可行的方法:
type="text"
type
<input type="text" name="password" onfocus="this.type='password'">
windows 和 Mac 中测试可行的浏览器有:
这是测试 示例。
欢迎补充~~~
如果使用自动填充,但要去掉选中帐号后的黄色背景,使用样式:
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px white inset !important; }
碰到同样问题,autocomplete="off" autocomplete="false" autocomplete="new-password" 在微信中都不行
autocomplete="false"
我这里提到的方法在你的应用场景下,是否有效果? @mice33
chrome64+有试过不
@Maxxxz 已更新,你再试下示例是否正常。感谢指正。
场景
在维护一个功能的时候,多个帐号切换登录的时候,微信内 h5 页面自动填充的帐号是错误的,需要阻止这种行为。
阻止自动填充帐号 input
从网上找了下面几种方法,但不可行的方法:
input
让浏览器去填充,设置display:none
或者type:hidden
。input
使用属性autocomplete="off"
。找到尝试后可行的方法:
input
不使用id
,获取值的时候用class
来获取。手机测试页面如下:
测试页面中使用了
form
,为了方便测试,将信息提交给了百度,微信内再次进入的时候,就没有填充密码。PC 端阻止密码填充
在 PC 端尝试可行的方法有:
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
。windows 和 Mac 中测试可行的浏览器有:
这是测试 示例。
欢迎补充~~~
样式重置
如果使用自动填充,但要去掉选中帐号后的黄色背景,使用样式:
参考