html 浏览器自动填充,避免浏览器自动填充表单的解决方式

最新推荐文章于 2022-10-08 19:22:42 发布

weixin_39982017

最新推荐文章于 2022-10-08 19:22:42 发布

阅读量703

点赞数

文章标签： html 浏览器自动填充

一直发现个问题，电脑端还好，就是手机端，浏览器总把记住的帐号密码自动填充到input,type分别等于text和password类型。烦人真烦人。

解决方案：添加input隐藏框来填充

这种方法的条件就是：

1、在用户和密码包含在form的情况下，同时包含一个 type="text"和 type="password"元素且不包含readonly和disabled属性，两个元素可以没有name和id属性

2、在没有form的情况下，同时包含一个 type="text"和 type="password"元素且不包含readonly和disabled属性，且两个元素至少都有name或id属性(但name和id可以是任意值但不能是空或空格)。

账号：
密码：

然后把input隐藏就好了。

2.第二种方法改一下input

主要是这两个属性：AUTOCOMPLETE="off"和type="text" οnfοcus="this.type='password'"。

一般的type="text"的input可以采用AUTOCOMPLETE="off"解决。W3C对autocomplete的属性描述如下：

autocomplete 属性规定输入字段是否应该启用自动完成功能。自动完成允许浏览器预测对字段的输入。

当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。

既然type="text"的问题解决了，type="password"的问题其实也可以借鉴它，我们初始化的时候让type="text"，并设置AUTOCOMPLETE="off"，当input聚焦时，把type从text转化为password。一般表单填充只有初始化的时候，只要我们在初始化的时候转化为text就可以解决问题了。