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


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 相关文章推荐
javascript String 对象
Apr 25 Javascript
JavaScript中yield实用简洁实现方式
Jun 12 Javascript
细说浏览器特性检测(2)-通用事件检测
Nov 05 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
Jan 27 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
Oct 25 Javascript
js 将json字符串转换为json对象的方法解析
Nov 13 Javascript
node.js中的fs.rmdirSync方法使用说明
Dec 16 Javascript
jQuery循环动画与获取组件尺寸的方法
Feb 02 Javascript
JavaScript基本语法讲解
Jun 03 Javascript
jQuery实现磁力图片跟随效果完整示例
Sep 16 Javascript
关于微信上网页图片点击全屏放大效果
Dec 19 Javascript
Vue切换div显示隐藏,多选,单选代码解析
Jul 14 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
shopex主机报错误请求解决方案(No such file or directory)
2011/12/27 PHP
PHP截断标题且兼容utf8和gb2312编码
2013/09/22 PHP
php生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
PHP的简单跳转提示的实现详解
2019/03/14 PHP
laravel配置Redis多个库的实现方法
2019/04/10 PHP
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
2015/06/19 Javascript
JQuery中Ajax()的data参数类型实例分析
2015/12/15 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
原生js代码实现图片放大境效果
2016/10/30 Javascript
详解jQuery中的DOM操作
2016/12/23 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
2017/01/03 Javascript
微信JS SDK接入的几点注意事项(必看篇)
2017/06/23 Javascript
浅谈对Angular中的生命周期钩子的理解
2017/07/31 Javascript
JS实现HTML页面中动态显示当前时间完整示例
2018/07/30 Javascript
微信小程序实现底部弹出模态框
2020/11/18 Javascript
利用Python脚本生成sitemap.xml的实现方法
2017/01/31 Python
Python竟能画这么漂亮的花,帅呆了(代码分享)
2017/11/15 Python
python实现Flappy Bird源码
2018/12/24 Python
Python从单元素字典中获取key和value的实例
2018/12/31 Python
Python读取Pickle文件信息并计算与当前时间间隔的方法分析
2019/01/30 Python
python儿童学游戏编程知识点总结
2019/06/03 Python
Python 实现数据结构-循环队列的操作方法
2019/07/17 Python
python支付宝支付示例详解
2019/08/22 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
Python持续监听文件变化代码实例
2020/07/22 Python
opencv python 对指针仪表读数识别的两种方式
2021/01/14 Python
咖啡为什么会有酸味?你喝到的咖啡為什麼是酸的?
2021/03/17 冲泡冲煮
HTML5 WebGL 实现民航客机飞行监控系统
2019/07/25 HTML / CSS
英国Zoro工具:手动工具,电动工具和个人防护用品
2016/11/02 全球购物
英国太阳镜品牌:Taylor Morris Eyewear
2018/04/18 全球购物
一套中级Java程序员笔试题
2015/01/14 面试题
幼儿园中秋节活动反思
2014/02/16 职场文书
教师节校长致辞
2015/07/31 职场文书
「偶像大师 MILLION LIVE!」七尾百合子手办开订
2022/03/21 日漫
Go语言的协程上下文的几个方法和用法
2022/04/11 Golang