解决办法是在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"/>

来自:http://www.jb51.net/article/112452.htm

input type=password 浏览器会自动填充密码的问题的更多相关文章

  1. 游览器保存密码和自动填充密码的困惑 (browser save password and auto fill password )

    原文 refer : http://www.cnblogs.com/happyfreelife/p/4240100.html 当一个带有username and password 的表单被提交, 游览 ...

  2. 解决谷歌浏览器给输入框input自动填充密码问题

    这时候我们可能会在 input上 加上 autocompleted="off" 这个属性来阻止input被自动填充. <input type="text" ...

  3. 解决chrome浏览器自动填充密码

    chrome会自动填充密码,解决方法很简单 使用下面的参考代码即可: <input type="password" readonly οnfοcus="this.r ...

  4. 解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 && 一般的浏览器input和button的高度不一致问题

    解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 如果我们把一个表单设置位 autofocus ,这时这个表单在获取焦点后就会产生淡黄色的背景,我们就是使用!importa ...

  5. Chrome浏览器下自动填充的输入框背景

    记录下从张鑫旭老师的微博中看到关于input输入框的属性 1.autocomplete="off" autocomplete 属性规定输入字段是否应该启用自动完成功能 自动完成允许 ...

  6. [转载]Js小技巧||给input type=“password”的输入框赋默认值

    http://www.cnblogs.com/Raywang80s/archive/2012/12/06/2804459.html [转载]Js小技巧||给input type="passw ...

  7. chrome表单禁止自动填充密码

    在用户登录成功以后,chrome会提示用户记住密码. 用户退出以后若前往注册.忘记密码页时会自动填充密码. 若不希望自动填充密码,只需在input里设置autoComplete="new-p ...

  8. BUG笔记:Win8 IE10下input[type="password"]内字符显示被截取问题

    这个BUG发生的截图: 这是发生在Windows8 IE10下,type为password的input文本框内输入长串字符后,初次失去焦点的时候会发生的一个BUG. 发生BUG的原因是这个文本框上应用 ...

  9. chrome防止自动填充密码

    是防止,不是禁止.禁止需要在浏览器设置. chrome浏览器保存密码之后,页面上有password存在的时候会出现自动填充用户名和密码的情况. 添加disableautocomplete和autoco ...

随机推荐

  1. ACM用到的算法。先做个笔记,记一下

    ACM 所有算法 数据结构 栈,队列,链表 哈希表,哈希数组 堆,优先队列 双端队列 可并堆 左偏堆 二叉查找树 Treap 伸展树 并查集 集合计数问题 二分图的识别 平衡二叉树 二叉排序树 线段树 ...

  2. Ajax向前后台传递json和转换

    学生管理系统MVC模式设计心得: jquery .ajax提交data数据格式 jquery 的Ajax方法提交数据,但是是多个参数,具体data的格式如下: data提交的数据类型为:Object  ...

  3. Angular 组件通讯、生命周期钩子 小结

    本文为原创,转载请注明出处: cnzt       文章:cnzt-p http://www.cnblogs.com/zt-blog/p/7986858.html http://www.cnblogs ...

  4. __new__ 和 __init__

    new 在新式类中负责真正的实例化对象,而__init__只是负责初始化 __new__创建的对象.一般来说 new 创建一个内存对象,也就是实例化的对象的实体,交给__init__进行进一步加工.官 ...

  5. 使用Reveal 调试iOS应用程序

    Itty Bitty Apps发布了一款实用工具——Reveal,它能够在运行时调试和修改iOS应用程序.Reveal能连接到应用程序,并允许开发者编辑各种用户界面参数,这反过来会立即反应在程序的UI ...

  6. 2017年记录CS+CV

    2017年3月开学,始终感觉自己计算机基础薄弱,加上之前自己也开始对机器学习,深度学习有一些了解,始终感觉没有入门.自己开始规划系统学习计算机软件(CS)和计算机视觉(CV)的基础知识.@2017/9 ...

  7. BUPT复试专题—日期(2013)

    题目描述 请你计算出第年月日是第X年的第几天.其中,1月1日是第一天,1月2日是第二天,以此类推. 计算时请注意闰年的影响.对于非整百年,年数能整除4是闰年,否则不是闰年:对于整百年,年数能整除400 ...

  8. Error: cannot call methods on draggable prior to initialization; attempted to call

    cannot call methods on draggable prior to initialization; attempted to call  报这个问题的根本原因是由于你的引用文件有问题 ...

  9. 网络编程中的常见陷阱之 0x十六进制数(C++字面值常量)

    十六进制数相等的推断 请问例如以下程序的输出是神马? #include <iostream> #include <string> using namespace std; in ...

  10. 【转载】TCP粘包问题分析和解决(全)

    TCP通信粘包问题分析和解决(全) 在socket网络程序中,TCP和UDP分别是面向连接和非面向连接的.因此TCP的socket编程,收发两端(客户端和服务器端)都要有成对的socket,因此,发送 ...