解决浏览器会自动填充密码的问题


Posted in Javascript onApril 28, 2017

解决办法是在form上或input上添加autoComplete="off"这个属性。

form表单的属性如下所示:

解决浏览器会自动填充密码的问题

但是这个解决方案在谷歌和火狐上均有bug,下面来一个一个解决。

1.'autocomplete="off"'在Chrome中不起作用解决方案

网站项目中,有登录和注册的弹框,在除chrome的浏览器中一切都ok,一旦在谷歌浏览器中,问题来了:

首先从登录弹框中登陆成功,chrome会弹出是否保存密码的提示框,点击保存密码按钮,

解决浏览器会自动填充密码的问题

然后接着退出账户,

这时打开注册弹框,你会发现注册弹框中用户名和密码也被默认填写进去了(登录弹框中默认填写进去符合逻辑),

解决浏览器会自动填充密码的问题

解决浏览器会自动填充密码的问题

这现象就诡异了,开始各种查,cookie,本地缓存,等等,都解决不了这问题;

查阅后,很多没有这个的解决方案。

1  通常我们会在form表单上加入autocomplete="off" 或者 在输入框中加入autocomplete="off"

<form method="post" action="" name="login" autocomplete="off"> 
</form> 
//或者 
<input id="name" type="text" name="name" maxlength="20" autocomplete="off">

2  但是有一种情况例外,就是表单中有input[type="password"],点击保存密码后,在Chrome浏览器则自动填充了用户名和密码的输入框;为了统一样式,我们需要就对Chrome的问题经行单独处理。

总结了4种解决方案,如下:

1 修改disabled属性

if(navigator.userAgent.toLowerCase().indexOf("chrome") != -1){ 
   var inputers = document.getElementsByTagName("input"); 
   for(var i=0;i<inputers.length;i++){ 
    if((inputers[i].type !== "submit") && (inputers[i].type !== "password")){ 
     inputers[i].disabled= true; 
    } 
   } 
   setTimeout(function(){ 
    for(var i=0;i<inputers.length;i++){ 
     if(inputers[i].type !== "submit"){ 
      inputers[i].disabled= false; 
     } 
    } 
   },100) 
  }

2 去除输入框的name和id属性

if(navigator.userAgent.toLowerCase().indexOf("chrome") != -1){ 
   var inputers = document.getElementsByTagName("input"); 
   for(var i=0;i<inputers.length;i++){ 
    if((inputers[i].type !== "submit") && (inputers[i].type !== "password")){ 
     var input = inputers[i]; 
     var inputName = inputers[i].name; 
     var inputid = inputers[i].id; 
     inputers[i].removeAttribute("name"); 
     inputers[i].removeAttribute("id"); 
     setTimeout(function(){ 
      input.setAttribute("name",inputName); 
      input.setAttribute("id",inputid); 
     },1) 
    } 
   } 
  }

3.可以在不需要默认填写的input框中设置 autocomplete="new-password"

网上咱没有找到对其详细解释,但是发现163邮箱的登录注册是这么用的,

解决浏览器会自动填充密码的问题

所以就借鉴借鉴咯,测试之后也是可以解决问题的,也是最简单的解决办法,网易给您点个赞!

4 修改readonly属性

<input type="password" readonly onfocus="this.removeAttribute('readonly');"/> 

但Firefox中有个Bug。首次提交后,FF会提示是否记住某某网站的密码,点击“记住”后 input[type=text]设置autocomplete="off"将不起作用。

解决浏览器会自动填充密码的问题

有两种情况:

1,form中没有input[type=password],autocomplete="off"将起作用

2,去掉form,设置input[type=text]的autocomplete也起作用(测试不好用)

3.Firefox则需要使用另一个扩展属性disableautocomplete  (测试也不行)

<input type="text"  disableautocomplete autocomplete="off"  id="number"/>

火狐现在也没有解决的办法,,谁有麻烦告知一下哈。。。。。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
一款Jquery 分页插件的改造方法(服务器端分页)
Jul 11 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
Apr 26 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
Aug 05 Javascript
JQuery Mobile 弹出式登录框的实现方法
May 28 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
Sep 21 Javascript
详解js前端代码异常监控
Jan 11 Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 Javascript
详解用Node.js写一个简单的命令行工具
Mar 01 Javascript
webpack4 处理CSS的方法示例
Sep 03 Javascript
angularJS实现不同视图同步刷新详解
Oct 09 Javascript
JavaScript ES6常用基础知识总结
Feb 09 Javascript
JS脚本实现定时到网站上签到/签退功能
Apr 22 Javascript
JS实现简单的天数计算器完整实例
Apr 28 #Javascript
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 #jQuery
js实现移动端编辑添加地址【模仿京东】
Apr 28 #Javascript
angularjs中使用ng-bind-html和ng-include的实例
Apr 28 #Javascript
d3.js入门教程之数据绑定详解
Apr 28 #Javascript
jQuery tip提示插件(实例分享)
Apr 28 #jQuery
JS实现动态添加DOM节点和事件的方法示例
Apr 28 #Javascript
You might like
那些年一起学习的PHP(二)
2012/03/21 PHP
PHP Cookie学习笔记
2016/08/23 PHP
PHP排序算法之简单选择排序(Simple Selection Sort)实例分析
2018/04/20 PHP
javascript Array.remove() 数组删除
2009/08/06 Javascript
清空上传控件input file的值
2010/07/03 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
2013/05/17 Javascript
利用JS实现浏览器的title闪烁
2013/07/08 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
2014/12/10 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
node.js实现快速截图
2016/08/27 Javascript
微信小程序前端源码逻辑和工作流
2016/09/25 Javascript
AngularJS学习第二篇 AngularJS依赖注入
2017/02/13 Javascript
JS实现异步上传压缩图片
2017/04/22 Javascript
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
详解Vue.js搭建路由报错 router.map is not a function
2017/06/27 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
js实现跟随鼠标移动的小球
2019/08/26 Javascript
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
JS实现页面鼠标点击出现图片特效
2020/08/19 Javascript
JS实现百度搜索框
2021/02/25 Javascript
Python之Scrapy爬虫框架安装及简单使用详解
2017/12/22 Python
python监控键盘输入实例代码
2018/02/09 Python
Python count函数使用方法实例解析
2020/03/23 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
Bata印度官网:源自欧洲舒适鞋履品牌
2020/01/30 全球购物
What's the difference between Debug and Trace class? (Debug类与Trace类有什么区别)
2013/09/10 面试题
毕业生医学检验求职信
2013/10/16 职场文书
先进事迹报告会感言
2014/01/24 职场文书
婚礼秀策划方案
2014/05/19 职场文书
基层党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
2014年教育教学工作总结
2014/11/13 职场文书
2014年班组工作总结
2014/11/20 职场文书
2015年党支部书记工作总结
2015/05/21 职场文书
董事长年会致辞
2015/07/29 职场文书
Java常用工具类汇总 附示例代码
2021/06/26 Java/Android