浏览器自动表单自动填充问题

当用户使用各种浏览器的时候,浏览器会提供一个自动保存账号密码的功能,这个功能在登录的时候非常有用,但是在有些表单中就比较坑爹了,原本需要输入其他数据的input会被自动填充成账号,有些位置的密码是不能自动填充的又被填充上了密码。
查了半天,各种方法但是感觉好复杂,我就用了一个贼简单的方法,先解决问题,然后再做优化。
这种情况是因为在写页面的时候,两个input标签的type一个为text(这个可以没有)另一个为password,而且两个标签的位置是紧挨着的,如下图:在这里插入图片描述
简单分解一下就是:

<div>
	<input type="text" value="xxx" />
	<input type="password" value="xxx"/>
</div>

我自己测试(猜的,但是最后效果挺好的),应该是浏览器自动判断input标签的类型,找到type=password的input,然后自动向上寻找紧挨着的type=text的input,如果存在,就将账号和密码依次填入。
所以解决办法特别简单:

<div>
	<input type="text" value="xxx" />
	<-- 屏蔽浏览器自动填充账号和密码开始 -->
	<input type="text" value="xxx" style="position:fixed;top:-1000px;left:-1000px;opacity:0;" />
	<input type="password" value="xxx" style="position:fixed;top:-1000px;left:-1000px;opacity:0;"/>
	<-- 屏蔽浏览器自动填充账号和密码结束 -->
	<input type="password" value="xxx"/>
</div>

在你需要屏蔽的input上增加一组input,type分别是text和password,注意:连个input必须是紧挨着的。让这两个input去接收自动填充的数据,然后将它俩隐藏起来就行了,反正数据用不到… …
打完,搞定

相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页