1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > html 如何关闭自动填充 如何禁止浏览器自动填充

html 如何关闭自动填充 如何禁止浏览器自动填充

时间:2021-09-11 07:06:24

相关推荐

html 如何关闭自动填充 如何禁止浏览器自动填充

浏览器的保存账户密码功能,给我们带来了很大的便利,但是在有些情况下,我们并不希望浏览器帮我们填充一些表单,然而autocomplete的一些参数项并不能阻止浏览器回填,这里我们来看下如何解决这个问题。

问题描述:

项目注册部分的表单有三项,分别为手机号、验证码和密码,当完成注册操作后,浏览器提醒是否保存密码,用户名部分显示的是验证码,点击保存后,打开登录页面,手机号和密码项被分别填充为了验证码和密码,给用户带来了一定的不便。

解决过程:

1. 第一反应考虑到的是,给登录表单的标签,增加autocomplete="off"

"off"

The browser is not permitted to automatically enter or select a value for this field. It is possible that the

document or application provides its own autocomplete feature, or that security concerns require that the

field's value not be automatically entered.

Note: In most modern browsers, setting autocomplete to "off" will not prevent a password manager from asking the user if they would like to save username and password information, or from automatically filling in those values in a site's login form. See the autocomplete attribute and login fields.

在autocomplete的文档中说明了value为off时,浏览器禁止给当前字段自动的输入或者选中一个值,但下方Note言明:在大多数现代浏览器中,off 值不能阻止浏览器的密码管理工具自动填充,所以第一次尝试失败;

2. 动态设置密码 input 标签 type

这样设置 可以保证用户在点击密码框之前,避免浏览器识别为登录表单、自动填充。

这里多说两句,浏览器是如何判断当前表单需要 autocomplete,浏览器自动保存表单是当前 form 存在 type 为 password 的input、且该 input 为表单中的第二个 input 输入框。

所以,这里给 password 设置初始 type 为 text,在用户 点击 input 聚焦后 设置 type 为 password ,避免浏览器在 页面 onload 之后判断登录表单进行回填。这样可以解决大部分场景下对于避免回填的需要。然而我们的业务需要 依据跳转链接中的 param 给用户填充 密码,这就导致了在用户 主动 focus 之前,密码会被明文展示,聚焦后又会隐藏,操作体验不佳;

3. page.onload 后 js 控制 input type

方法同上,问题点在于 页面load 后手动设置 input type 为 password,而后根据 page url 参数 填充表单。

但存在问题是 浏览器填充的时机无法控制,导致业务填充表单被自动填充覆盖;方案pass;

4. autocomplete 设置 其他参数

autocomplete 除了 on、off 之外,还有很多参数:name、email、username、new-password、current-password、street-address 等等;

当 input type 为 password 但 autocomplete 为 new-password, 即可解决浏览器自动填充问题,浏览器将当前输入框识别为新密码,便不会自阿东填充值。(PS:有例子提到,设置 autocomplete 为一个 任意字符串 ,也能达到相同效果,大家可以试一下)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。