今天朋友说我的程序有bug
老是出这个屎黄色背景还自动在地址上填上邮箱
问我是不是字段调错了?
我一眼就瞧出了端倪,这不自动填充吗?
我用chrome测了半天,chrome的显示效果是。。。
也不自动填充啊!!
我是不会傻到去装垃圾360极速的,于是临时搞了个虚拟机装了个360极速看了一下,发现极速现在竟然内核版本挺高了
竟然是78了,QQ也才70啊,厉害了!
但。。。这些浏览器的自动填充还是会直接无情的触发,只要手贱保存了密码。。。
这样霸道的填充完全有悖用户体验,查了一些大牛的博客文章,提出了好多方案,最后在一篇文章里看到了一个方案(最后一段)
https://blog.csdn.net/xw505501936/article/details/52129579
http://stackoverflow.com/questions/15738259/disabling-chrome-autofill/29582380#29582380
于是就有了我下面的解决方案
<!-- 防止自动填充的文本框 -->
<input name="username" type="text" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');" style="cursor: text;" />
<!-- 防止自动填充的密码框 -->
<input name="password" type="password" autocomplete="new-passowrd" readonly onfocus="this.removeAttribute('readonly');" style="cursor: text;" />
autocomplete属性是让除了谷歌内核之外的浏览器生效,不会自动填充
readonly属性是让它开始就只读 这样浏览器就不会自动填充
onfocus是当鼠标点这个文本框(获得焦点)的时候,获得焦点同时把文本框只读属性去掉
style是为了让那个只读图标换成正常图标让用户体验不到(有浏览器会给readonly的文本框设一个禁用的图标)
经过几个浏览器的测试,发现这个方案很好的解决了这个问题,而且代码量最小,值得记录下来
也希望能帮助到更多遇到这个问题而苦恼犯愁的人😃