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

大家都知道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. python之saltstack二次开发

    一.salt的概念 salt是一个配置管理系统,能够维护预定义状态的远程节点(比如,确保指定的报被安装,指定的服务在运行).一个分布式远程执行系统,用来在远程节点(可以是单个节点,也可以是任意规则挑选 ...

  2. Java String 字符串类细节探秘

    一. 字符串基本知识要点 字符串类型String是Java中最常用的引用类型.我们在使用Java字符串的时候,通常会采用两种初始化的方式:1. String str = "Hello Wor ...

  3. windown reids

    记录Windown安装Redis和php_redis扩展 和Linux系统不同windown中不需要编译安装:只需要下对版本拖拽过去即可: 首先安装redis服务: 可以百度下一个,只要注意系统版本即 ...

  4. 文件同步 单向rsync 双向unison 监控inotifywait 免密登录

    1.负载均衡中文件同步必不可少,我这边选择rsync来实现文件同步 rsync同步文件机制更适用于单向文件同步,可配合unison实现双向同步功能. 实现同步的两种方法 一:ssh方法 rsync - ...

  5. VueJs 学习笔记

    VueJs学习笔记 参考资料:https://cn.vuejs.org/ 特效库:TweenJS(补间动画库)  VelocityJS(轻量级JS动画库) Animate.css(CSS预设动画库) ...

  6. 一种精准monkey测试的方法

    WeTest 导读 相信大家都知道移动端应用的monkey测试吧,不知你们有没有为monkey测试的太过于随机性的特性有过困扰,至少在我们这种界面控件较少且控件位置较偏的app的使用上其测试有效性大打 ...

  7. 新的征程 in ZJU

    争取考上了心仪的学校 并进入了心仪的实验室 但是对我来说,未来将是更多的挑战 首先我觉得我学习能力还是不足,无法做到一天的高效率学习 实验室的方向是可视化,我觉得这个是个非常复杂的方向 数学,pyth ...

  8. 【上传-下载】-jmeter工具

    上 传 ================================================================================================ ...

  9. Visaul Studio 密钥

    vs professional 2015 简体中文版  :HMGNV-WCYXV-X7G9W-YCX63-B98R2

  10. visionpro吧-百度贴吧

    Halcon,Visionpro视频教程,观看下载地址:http://www.211code.com