博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
解决浏览器保存密码自动填充问题
阅读量:6262 次
发布时间:2019-06-22

本文共 1008 字,大约阅读时间需要 3 分钟。

问题描述

话说有一天,我如往常一样打开我的开发网站进行登录操作。浏览器很平常的在我们进行登录操作之后询问我是否需要记住密码,懒惰如我点击了记住密码。一切都很正常的进行着,没有什么异常发生。然而,问题就出现了。当我打开一个新建用户的操作,里面的输入框自动将我的用户名和密码默认填写进去了,然后触发了内置的校验规则

保存密码

自动填充账号密码

在我确认过在打开编辑框的时候已经输入框的数据重置之后,开始了我的排查错位之旅。从cookie,本地缓存等等,都没有发现相关的问题。后来发现是浏览器存在自动填充机制的问题。

浏览器自动填充机制

经过我的反复测试,以Chrome为例,当浏览器遇到type="text"与type="password"的<input/>标签紧邻时,会触发浏览器自动填充行为。默认为黄色背景。firefox和360浏览器的处理方式是:只要检测到页面里有满足填充机制的,不管是不是display:none 的,只要检测到就直接往里填充。

解决方案

  1. 设置浏览器不提示记住密码,记住密码的网站都在设置里可以看到,并且可以去除(很明显,这个方法治标不治本,我就想记住密码还不行吗?)

    在设置里不提示记住密码

2.使用HTML5新属性autocomplete="off" 但禁用自动填充。这个属性好像是firefox发起的,并不是标准属性,所以这块主要是针对ie和获取浏览器生效。谷歌不承认这个属性。所以在谷歌浏览器上并没有产生任何效果

3.既然浏览器遇到type="text"与type="password"的<input/>标签紧邻时触发自动填充行为,则将两个<input/>隔开,使用隐藏的方式“欺骗”浏览器,将密码信息填写在隐藏区域。

.is-hidden {    position: absolute;    left: -10000px;    top: -10000px;}
/*让input看不见,而不是直接display: none,如果直接display: none,有些浏览器则不生效,比如谷歌*/ 

4.修改readonly属性

将表单输入设为可读模式,浏览器自动填充就失效了,在焦点在该表单输入的时候再将可读属性移除。该方法亲试简洁好用

总结

在以上介绍的方法并不是全部的解决方法,目前我用的是第四个方法比较多,虽然第三个方法也挺好用,但是多增加标签的类型不符合我的作风,还是默默的用了第四种方法。欢迎大家补充更多的一些方法,未完待续!

转载地址:http://pdkpa.baihongyu.com/

你可能感兴趣的文章
Docker 使用笔记
查看>>
jest && vue
查看>>
前端每周清单第 36 期:深入 Vue 2.5 类型增强、Puppeteer 端到端测试、PayPal 跨域套装...
查看>>
iOS - Swift 面向协议编程(二)
查看>>
闲扯下午引爆乌云社区“盗窃”乌云币事件
查看>>
原生js轮盘抽奖实例分析(幸运大转盘抽奖)
查看>>
知否?知否?情人眼里出代码
查看>>
DataBinding数据绑定基本讲解
查看>>
15 分钟无门槛构建服务器性能监控系统
查看>>
【JS第19期】设计模式-简单工厂模式
查看>>
Flask之旅: 快速上手
查看>>
Android图片加载开源库深度推荐,安利Fresco
查看>>
聊聊flink的MemoryPool
查看>>
聊聊flink KeyedStream的KeySelector
查看>>
spring mvc如何计算BEST_MATCHING_PATTERN_ATTRIBUTE
查看>>
swift 消息监听和键值监听(kvo)
查看>>
02@在类的头文件中尽量少引入其他头文件
查看>>
Spring定时任务高级使用篇
查看>>
阿里资深技术专家总结:要怎样努力才可以成为公司主力架构师
查看>>
数学推导+Python实现机器学习算法:线性回归
查看>>