解决Chrome、360自动填充用户名和密码行为带来的困扰

对于今天被浏览器自动填充账户密码行为恶心到吐，我必须记录下我的心情。
常见的几种解决方案：

先列举下查到的的几种方法

1.input标签加autocomplete="off"或者autocomplete=“new-password”，但不完全起作用。

<input type="password" name="pw" id="pw"  autocomplete="off" />
<input name="password" type="password" autocomplete="new-password"/>

2.利用自动填充，设置一个隐藏的input框，骗浏览器填充到看不到的地方

<input type="password" style="display:none;" />
<input [disabled]="userId" nz-input type="text" [placeholder]="userId?'密码':'123456'" autocomplete="off" onfocus="this.type='password'"/>

这个方法其实还行，最让我无语的是360，没法吐槽了，chrome，firefox，qq都可以解决，只有360特殊，依然强制填充，然后我查了有人说不要用display：none，使用z-index：-10方式覆盖掉，嗯，还是没起到效果。
3.有人说扰乱浏览器自动识别

<div class="col-sm-9"><input type="password" style="display: none"/>//增加这一行，扰乱浏览器识别自动填充<input type="text" class="form-control" value="admin" name="dataSourceUserName" placeholder="请输入“用户名”" maxlength="50" >
</div>
<div class="form-group"  id="addPwd"><label for="lastname" class="col-sm-3 control-label">密码<font color="red">*</font></label><div class="col-sm-9"><input type="password" style="width: 420px" class="form-control" name="dataSourcePwd" id="password-1" placeholder="Password"  maxlength="50"></div>
</div>

然而并没有效果啊！！！
4.最终解决方案
经过多方考证，找到一种方案，可以解决360浏览器带来的痛苦：

<input nz-input onfocus="{this.parentNode.className='focus pwd',this.type='text'}" onblur="{this.parentNode.className = 'pwd',this.type='password'}" autocomplete="off" [placeholder]="userId?'密码':'123456'" disabled/>

本人亲自鉴定此方法对于360强制填充是有效的！！！
如果没有解决可以结合2和4 一起使用。

分别又去测试了上述的其他浏览器，这个问题完美解决了哈哈哈，鼓掌！！又是烦恼和开心并存的一天啊。

解决Chrome、360自动填充用户名和密码行为带来的困扰相关推荐

Chrome无法自动填充用户名和密码
Chrome无法自动填充用户名和密码一般地,Chrome会在页面加载时即会自动填充用户保存的用户名和密码,但是有的时候只能通过用户通过下拉列表明确选择某一账户时才会自动填充. 解决方法是在chrom ...
Ionic--再次打开自动填充用户名和密码的问题解决方法
2019独角兽企业重金招聘Python工程师标准>>> 问题:每次清理手机后台,再次进入都要重新输入用户名和密码,影响用户体验. 解决方法:只要用户登录过一次,再次打开应用程序,都会 ...
git命令自动填充用户名与密码
需求如果没有配置ssh key到git 服务器,每次执行git命令与远程交互时,都需要手动输入用户与密码比如: git pull 会有如下输入要求: Username for 'http://gi ...
chrome防止自动填充密码
chrome防止自动填充密码 chrome浏览器保存密码之后,页面上有password存在的时候会出现自动填充用户名和密码的情况. 添加一个input[type=password] 设置display ...
html自动填充密码width 0,解决浏览器会自动填充密码的问题
解决办法是在form上或input上添加autoComplete="off"这个属性. form表单的属性如下所示: 但是这个解决方案在谷歌和火狐上均有bug,下面来一个一个解决. ...
Chrome谷歌浏览器自动填充账号密码样式
在Chrome自动填充默认样式 Chrome自动填充账号和密码之后,他输入框会有一个他自带的样式,黄色的或者白色的: 技术栈Vue +element组件库. .el-input__inner {hei ...
chrome浏览器自动填充时背景色改变（-webkit-autofill）
出现的问题在做一个表单时使用chrome浏览器输入表单内容,在第二次测试的时候出现了自动填充的选项,选择后发现输入框的样式不再是手动设置的样式原手动填充效果如下: 选择自动填充后的样式: 此时观察 ...
浏览器自动填充数据,Cookie清除不了？，这是因为某些浏览器设置了，自动填充账户名密码，造成cookie没有删除的假像。
一.原因分析 1.查看Cookie是否真的被清除掉了 2.原来是浏览器设置了自动填充密码二.代码展示: 虽然这个地方清除了,但是由于某些浏览器设置了,自动填充账户名密码,造成cookie没有删除的假 ...
禁止chrome浏览器自动填充表单的解决方案
禁止chrome浏览器自动填充表单的解决方案参考文章: (1)禁止chrome浏览器自动填充表单的解决方案 (2)https://www.cnblogs.com/ld-swust/p/5801606 ...

解决Chrome、360自动填充用户名和密码行为带来的困扰

解决Chrome、360自动填充用户名和密码行为带来的困扰

先列举下查到的的几种方法

解决Chrome、360自动填充用户名和密码行为带来的困扰相关推荐

最新文章

热门文章