最近项目中遇到一个令人头疼的问题,查阅各种资料,尝试各种方法,最终得以解决;哎···下面就说说这心酸的历程吧。

大家都知道autocomplete属性是表单字段中的HTML5新属性,该属性有两种状态值,分别为"on" 和 "off",该属性可省略:省略属性值后默认值为"on",也可以省略属性名,直接写入关键字on或off。

网站项目中,有登录和注册的弹框,在除chrome的浏览器中一切都ok,一旦在谷歌浏览器中,问题来了:
首先从登录弹框中登陆成功,chrome会弹出是否保存密码的提示框,点击保存密码按钮,

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


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

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

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

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

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

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

1 修改value值(目前已失效,随着chrome版本的升级,现今版本已不再能获取到value值了,所以无法对其进行操作,貌似chrome自动填充的表单的value值是存在 DocumentFragment里的div中的,暂不知道怎么去处理,等待大神告知)

  1. if(navigator.userAgent.toLowerCase().indexOf("chrome") != -1){
  2. var inputers = document.getElementsByTagName("input");
  3. for(var i=0;i<inputers.length;i++){
  4. if((inputers[i].type !== "submit") && (inputers[i].type !== "password")){
  5. inputers[i].value = " ";
  6. }
  7. }
  8. setTimeout(function(){
  9. for(var i=0;i<inputers.length;i++){
  10. if(inputers[i].type !== "submit"){
  11. inputers[i].value = "";
  12. }
  13. }
  14. },100)
  15. }

2 修改disabled属性

  1. if(navigator.userAgent.toLowerCase().indexOf("chrome") != -1){
  2. var inputers = document.getElementsByTagName("input");
  3. for(var i=0;i<inputers.length;i++){
  4. if((inputers[i].type !== "submit") && (inputers[i].type !== "password")){
  5. inputers[i].disabled= true;
  6. }
  7. }
  8. setTimeout(function(){
  9. for(var i=0;i<inputers.length;i++){
  10. if(inputers[i].type !== "submit"){
  11. inputers[i].disabled= false;
  12. }
  13. }
  14. },100)
  15. }

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

  1. if(navigator.userAgent.toLowerCase().indexOf("chrome") != -1){
  2. var inputers = document.getElementsByTagName("input");
  3. for(var i=0;i<inputers.length;i++){
  4. if((inputers[i].type !== "submit") && (inputers[i].type !== "password")){
  5. var input = inputers[i];
  6. var inputName = inputers[i].name;
  7. var inputid = inputers[i].id;
  8. inputers[i].removeAttribute("name");
  9. inputers[i].removeAttribute("id");
  10. setTimeout(function(){
  11. input.setAttribute("name",inputName);
  12. input.setAttribute("id",inputid);
  13. },1)
  14. }
  15. }
  16. }

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

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

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

5 修改readonly属性

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

参考来源:

http://stackoverflow.com/questions/15738259/disabling-chrome-autofill/29582380#29582380

《转》'autocomplete="off"'在Chrome中不起作用解决方案的更多相关文章

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

    1.正确的姿势是: <input type="password" name="password" autocomplete="new-passw ...

  2. 'autocomplete="off"'在Chrome 中不起作用

    大家都知道autocomplete属性是表单字段中的HTML5新属性,该属性有两种状态值,分别为"on" 和 "off",该属性可省略:省略属性值后默认值为&q ...

  3. 解决autocomplete=off在Chrome中不起作用的方法

    大家都知道autocomplete属性是表单字段中的HTML5新属性,该属性有两种状态值,分别为"on" 和 "off",该属性可省略:省略属性值后默认值为&q ...

  4. autocomplete="off" 在新版chrome中不起作用

    autocomplete="off" 在新版chrome中不起作用,还是自动填充了 用户名和密码,改为 autocomplete="new-password"  ...

  5. 小于12px的字体大小在Chrome中不起作用

    今天遇见一个小问题,让人挺郁闷的,在Chrome浏览器中无法把字体变成12px以下.网上搜索以下,发现无论中文英文数字在网页中CSS设置小于12px后各大浏览器均支持,在谷歌chrome浏览器不支持解 ...

  6. HTML Meta中添加X-UA-Compatible和IE=Edge,chrome=1有什么作用

    HTML Meta中添加X-UA-Compatible和IE=Edge,chrome=1有什么作用? X-UA-Compatible是自从IE8新加的一个设置,对于IE8以下的浏览器是不识别的. 通过 ...

  7. chrome中workspace配置达到同步修改本地文件的作用

    在前端开发中,我们经常需要在浏览器中进行调试,特别是一些样式的修改,如果你还是先在浏览器elements中调试好在复制到本地文件,那就真的out了. chrome浏览器的workspace功能完全可以 ...

  8. Google Chrome中的高性能网络-[译]《转载》

    以下内容是"The Performance of Open Source Applications" (POSA)的草稿, 也是The Architecture of Open S ...

  9. js_html_input中autocomplete="off"在chrom中失效的解决办法 使用JS模拟锚点跳转 js如何获取url参数 C#模拟httpwebrequest请求_向服务器模拟cookie发送 实习期学到的技术(一) LinqPad的变量比较功能 ASP.NET EF 使用LinqPad 快速学习Linq

    js_html_input中autocomplete="off"在chrom中失效的解决办法 分享网上的2种办法: 1-可以在不需要默认填写的input框中设置 autocompl ...

随机推荐

  1. 成都Uber优步司机奖励政策(4月8日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  2. InnoDB锁冲突案例演示

      Preface       As we know,InnoDB is index organized table.InnoDB engine supports row-level lock bas ...

  3. bash脚本练习

    练习一: 1.添加5个用户,user1,...,user5: 2.每个用户的密码同用户名,添加密码完成后,不显示命令的执行结果: 3.每个用户添加完成后,都要显示用户某某已添加成功. useradd ...

  4. TPO-12 C2 A problem of the TA's payroll

    TPO-12 C2 A problem of the TA's payroll payroll n. 工资单:在册职工人数:工资名单: paycheck n. 付薪水的支票,薪水 paperwork ...

  5. 一段代码-Java

    在打算写这么一篇文章的时候,想到很多,觉得要是全都写下来的话,估计BZ也不知道要写多少,总之,好多吧!那么,就让BZ一切从简... 我们知道java它的特殊性在于,用它所写代码的运行是依靠自己的一套j ...

  6. Struts2(八.添加用户多张照片实现文件上传功能)

    1.modify.jsp 在modify.jsp修改用户信息页面实现文件上传,添加用户照片的功能 如果是文件上传,method必须是post,必须指定enctype <form method=& ...

  7. [Clr via C#读书笔记]Cp3共享程序集和强命名程

    Cp3共享程序集和强命名程序集 私有方式部署+全局方式部署:弱命名程序集+强命名程序集 强命名程序集使用发布者的公钥私钥进行签名,唯一标识发布者. 共享dll被全部复制到System32中 强命名程序 ...

  8. ES6 之 let / const

    本博文配合 阮一峰 <ES6 标准入门(第3版)>一书进行简要概述 ES6 中的 let 与 const. 历史遗留问题 由于 JS ES3语法中的 var 提升变量.没有块级作用域,因而 ...

  9. error:no module named StringIO or cStringIO

    一般遇到没有某个模块问题的时候,通常的解决方法是pip相应的模块: 不过,鉴于Python2和python3的不同(让人头疼) 解决方法:在python3中,该模块被新的模块取代,即io. 重新imp ...

  10. Python3 Tkinter-Radionbutton

    1.创建单选按钮 from tkinter import * root=Tk() Radiobutton(root,text='b1').pack() Radiobutton(root,text='b ...