因为业务需求,在写一个注册页面的时候,发现浏览器会自动填充此域名下已经保存的账号密码,给用户带来不便。加了HTML5 中的新属性autocomplete="off" ,但是并没有产生效果。 反复测试后发现浏览器自动填充机制是满足:页面里有一个type=password的input且这个input前面有一个type=text的input。的时候就会进行自动填充。

  firefox和360浏览器的处理方式是:只要检测到页面里有满足填充机制的,不管是不是display:none 的,只要检测到就直接往里填充。而且是有几个符合条件的就填充几个。而chrome 54版本略有不同:满足上面的条件且页面里只有一个type=password 的input。才会自动给第一个type=text 的input填充账号,给type=password 的input填充密码。所以chrome 54版本不存在注册页面自动填充的问题。 Google出来的方法是修改input的type , 页面里input都写成type=text , 等获得焦点的时候给改成type=password。下意识去搜了下IE下修改type,发现IE下type是个只读属性,修改type的方法并不能兼容IE。(网上说的 disableautocomplete 我试了下不能阻止360就没再用。)

  于是自己尝试着写了个方法,页面里相应的input写成type=text,当页面加载好后,执行一个10毫秒的定时器,remove掉这些input,重新给页面里添加type=password 的input 。相对应的事件都改成用on绑定。 firefox下自动填充的问题解决了,并且也兼容了IE,但是。。。360浏览器你什么时候添加他什么时候就给你填充!┻━┻︵╰(‵□′)╯︵┻━┻ ,这时候发现网易邮箱的输入框是这么写的 autocomplete="new-password" ,尝试试了一下,竟然成功兼容360了!然后试了下 readonly ,写在定时器里removeAttr 掉只读属性,也能阻止360浏览器自动填充。

 

HTML5 中的新属性autocomplete="off"失效的解决方法(兼容firefox,IE,360)的更多相关文章

  1. 小强的HTML5移动开发之路(13)——HTML5中的全局属性

    来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey  快捷键 <!DOCTYPE HTML> ...

  2. HTML5表单新属性

    HTML5表单新属性 autofocus  自动聚焦 <input type="text" autofocus> placeholder占位文本 tel         ...

  3. jquery中checkbox全选失效的解决方法

    这篇文章主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下     如果你使用jQuery 1.6 ,代码if ( $(elem).attr(“checked”) ),将 ...

  4. Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法

    Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法 2014-03-27 11:44:46|  分类: Easy UI|举报|字号 订阅     可以使用$.parser.pa ...

  5. Web设计中打开新页面或页面跳转的方法 js跳转页面

    Web设计中打开新页面或页面跳转的方法 一.asp.net c# 打开新页面或页面跳转 1. 最常用的页面跳转(原窗口被替代):Response.Redirect("newpage.aspx ...

  6. Mybatis中实体类属性与数据库列表间映射方法介绍

               这篇文章主要介绍了Mybatis中实体类属性与数据列表间映射方法介绍,一共四种方法方法,供大家参考.         Mybatis不像Hibernate中那么自动化,通过@Co ...

  7. margin-top失效的解决方法

    异常处理汇总-前端系列 http://www.cnblogs.com/dunitian/p/4523015.html 我的是属于这种情况 按照网上的说法,我就是这个现象了 两个层box1和box2,b ...

  8. ode.js 版本控制 nvm 和 n 使用 及 nvm 重启终端失效的解决方法

    今天的话题包括2个部分 node.js 下使用 nvm 或者 n 来进行版本控制 nvm 安装node.js 版本后,重启终端 node , npm 环境变量失效 第一部分 用什么来管理 node.j ...

  9. [datatable]关于在DataTable中执行DataTable.Select("条件")返回DataTable的解决方法

    -- :09关于在DataTable中执行DataTable.Select("条件")返回DataTable的解决方法 在实际编程工程中,常常遇到这样的情况:DataTable并不 ...

随机推荐

  1. Apache Commons 系列简介 之 Pool

    一.概述 Apache Commons Pool库提供了一整套用于实现对象池化的API,以及若干种各具特色的对象池实现.2.0版本,并非是对1.x的简单升级,而是一个完全重写的对象池的实现,显著的提升 ...

  2. (译) Conditional Variational Autoencoders 条件式变换自编码机

    Conditional Variational Autoencoders --- 条件式变换自编码机 Goal of a Variational Autoencoder: 一个 VAE(variati ...

  3. Arcgis 图层编辑器“粘贴”功能菜单灰色不能使用的问题与解决办法

    本人由win7系统更换为win10系统,平常使用的arcgis10.2升级使用10.3版本,相应的VS2012也升级使用2013版本,但是在安装了之后发现"Editor"编辑工具中 ...

  4. 怎么用BarTender的格式刷

    BarTender的新格式刷使您能够轻松地在模板上的多个对象之间共享格式.您可以在单个模板中以及在多个BarTender模板和文档之间复制对象样式.下面小编给大家来讲讲BarTender格式刷这一可用 ...

  5. git下载自己项目到本地

    git下载自己项目到本地 假如外出工作,需要在另一台电脑上面pull自己的某个git远程项目到本地 $ git init $ git pull https://github.com/TTyb/54qj ...

  6. Java--super关键字用法

    看了马老师的视频,百度了一下,随即敲了一些代码,super是超人,超级的意思,层面上理解为父类 class Person { Person(){             System.out.prin ...

  7. iScroll知识点

    1.如果你有一个复杂的DOM结构,最好在onload事件之后适当的延迟,再去初始化iScroll.最好给浏览器100或者200毫秒的间隙再去初始化iScroll. 2.iScroll作用于滚动区域的外 ...

  8. win7 64位 VS2010调试提示“ORA-12154: TNS: 无法解析指定的连接标识符”的解决方法

    如果使用工具可以连接Oralce说明与Oralce安装无法. 解决方法: 解决步骤: 1.去网上下载"instantclient-basic-win32-11.2.0.1.0.zip&quo ...

  9. nodejs单元测试

    前言: 之前一直听说过单元测试,但是具体怎么做,也没有深入研究,感觉测试是一件很麻烦的事,花费时间.可能是自己太懒了,一看到测试那么多陌生的东西就不想弄了. 然后一拖再拖,直到最近,换了一家公司,然后 ...

  10. [zz]Maya C++ API Programming Tips

    Maya C++ API Programming Tips source : http://wanochoi.com/?page_id=1588 How to handle the multiple ...