在我们前端开发中,会遇到这么一个问题:【如下面这张图样,一打开网页,表单的用户名、密码就被自动填充】很多时候,我们都不想这样,那么如何解决这个问题呢?请听我一一道来
工具/原料
一台电脑
浏览器自动填充实现方式
1、如果当我们登录某个网页时,此网页没有显示的阻止其自动填充,那么浏览器就会从cache中获取用户名密码等数据自动填充表单。
解决办法一:
1、既然浏览器自动填充的前提是由于网页没有饺咛百柘显示的声明不允许自动填充。那么我们主要显示的声明下不就好了?如下:我们通过在input标签中加一个属性autocomplete="off"来显示声明不允许浏览器自动填充<inputtype="text"name="foo"autocomplete="off"/>事实上也确实有一定作用,能够阻止某些浏览器的自动填充。
2、然而,此方式也就仅有一定作用,而不是完全有效!为什么呢?这就涉及到了不同的浏览器根据标准的实现程度问题了,毕竟,标准虽然是一样的,但是不同浏览器的实现程度却不一样。这也是为什么同一个网页在不同浏览器的显示效果有差异的原因所在。所以方式一在Mozilla等一些浏览器里面是有效的,但是不是在所有的浏览器里面都有效。
解决办法二:
1、既然第一种方法,无法在所有浏览器里面都有效,那么有没有其他方法能在所有浏览器里面都有效呢?很明显,答案是有的,也就是我说的第二种方法。
2、第二种方法说明:前面我们已经知道了,浏览器是直接从Cache中直接获取数据来填充网页表单的,那么,他具体是怎么填充的呢?填蓓豆咛萱充规则又是什么呢?经过我的几次尝试发现,浏览器的填充规则非常小白,他是直接填充他所找到的第一个文本框与密码框。而且不分这些文本框,密码框是否显示,是否隐藏,只要存在哪里,那就会自动的填充。看到这里,大家估计也猜到了我的第二种方法是什么了吧?没错,既然没办法抵抗,那我就闭眼享受吧。。。既然你要填充,那我就主动写个input来接受你的填充,然后当你填充完成后,我最悄悄的把这个被强制填充了的input给隐藏下,然后不就是万事大吉了吗。这样,就不会影响到用户体验了。如:<inputstyle="display:none"><!--fordisableautocompleteonchrome--><inputtype="text"id="username"name="username"autocomplete="off"><inputtype="password"name="password1"style="display:none"/><inputtype="password"name="password"/>
3、这种方法,经过测试,各种浏览器都支持。好了,基本就这样了。