360浏览器、QQ浏览器等谷歌内核模式 文本框自动填充的解决方案（考虑足够兼容性）

今天朋友说我的程序有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的文本框设一个禁用的图标）

经过几个浏览器的测试，发现这个方案很好的解决了这个问题，而且代码量最小，值得记录下来

也希望能帮助到更多遇到这个问题而苦恼犯愁的人😃