《转》'autocomplete="off"'在Chrome中不起作用解决方案
最近项目中遇到一个令人头疼的问题,查阅各种资料,尝试各种方法,最终得以解决;哎···下面就说说这心酸的历程吧。
大家都知道autocomplete属性是表单字段中的HTML5新属性,该属性有两种状态值,分别为"on" 和 "off",该属性可省略:省略属性值后默认值为"on",也可以省略属性名,直接写入关键字on或off。
网站项目中,有登录和注册的弹框,在除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的问题经行单独处理。
总结了5种解决方案,如下:
1 修改value值(目前已失效,随着chrome版本的升级,现今版本已不再能获取到value值了,所以无法对其进行操作,貌似chrome自动填充的表单的value值是存在 DocumentFragment里的div中的,暂不知道怎么去处理,等待大神告知)
- 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].value = " ";
- }
- }
- setTimeout(function(){
- for(var i=0;i<inputers.length;i++){
- if(inputers[i].type !== "submit"){
- inputers[i].value = "";
- }
- }
- },100)
- }
2 修改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)
- }
3 去除输入框的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)
- }
- }
- }
4 可以在不需要默认填写的input框中设置 autocomplete="new-password"
网上咱没有找到对其详细解释,但是发现163邮箱的登录注册是这么用的,
所以就借鉴借鉴咯,测试之后也是可以解决问题的,也是最简单的解决办法,网易给您点个赞!
5 修改readonly属性
- <input type="password" readonly onfocus="this.removeAttribute('readonly');"/>
参考来源:
http://stackoverflow.com/questions/15738259/disabling-chrome-autofill/29582380#29582380
《转》'autocomplete="off"'在Chrome中不起作用解决方案的更多相关文章
- 'autocomplete="off"'在Chrome中不起作用解决方案
1.正确的姿势是: <input type="password" name="password" autocomplete="new-passw ...
- 'autocomplete="off"'在Chrome 中不起作用
大家都知道autocomplete属性是表单字段中的HTML5新属性,该属性有两种状态值,分别为"on" 和 "off",该属性可省略:省略属性值后默认值为&q ...
- 解决autocomplete=off在Chrome中不起作用的方法
大家都知道autocomplete属性是表单字段中的HTML5新属性,该属性有两种状态值,分别为"on" 和 "off",该属性可省略:省略属性值后默认值为&q ...
- autocomplete="off" 在新版chrome中不起作用
autocomplete="off" 在新版chrome中不起作用,还是自动填充了 用户名和密码,改为 autocomplete="new-password" ...
- 小于12px的字体大小在Chrome中不起作用
今天遇见一个小问题,让人挺郁闷的,在Chrome浏览器中无法把字体变成12px以下.网上搜索以下,发现无论中文英文数字在网页中CSS设置小于12px后各大浏览器均支持,在谷歌chrome浏览器不支持解 ...
- HTML Meta中添加X-UA-Compatible和IE=Edge,chrome=1有什么作用
HTML Meta中添加X-UA-Compatible和IE=Edge,chrome=1有什么作用? X-UA-Compatible是自从IE8新加的一个设置,对于IE8以下的浏览器是不识别的. 通过 ...
- chrome中workspace配置达到同步修改本地文件的作用
在前端开发中,我们经常需要在浏览器中进行调试,特别是一些样式的修改,如果你还是先在浏览器elements中调试好在复制到本地文件,那就真的out了. chrome浏览器的workspace功能完全可以 ...
- Google Chrome中的高性能网络-[译]《转载》
以下内容是"The Performance of Open Source Applications" (POSA)的草稿, 也是The Architecture of Open S ...
- 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 ...
随机推荐
- 成都Uber优步司机奖励政策(4月8日)
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- InnoDB锁冲突案例演示
Preface As we know,InnoDB is index organized table.InnoDB engine supports row-level lock bas ...
- bash脚本练习
练习一: 1.添加5个用户,user1,...,user5: 2.每个用户的密码同用户名,添加密码完成后,不显示命令的执行结果: 3.每个用户添加完成后,都要显示用户某某已添加成功. useradd ...
- 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 ...
- 一段代码-Java
在打算写这么一篇文章的时候,想到很多,觉得要是全都写下来的话,估计BZ也不知道要写多少,总之,好多吧!那么,就让BZ一切从简... 我们知道java它的特殊性在于,用它所写代码的运行是依靠自己的一套j ...
- Struts2(八.添加用户多张照片实现文件上传功能)
1.modify.jsp 在modify.jsp修改用户信息页面实现文件上传,添加用户照片的功能 如果是文件上传,method必须是post,必须指定enctype <form method=& ...
- [Clr via C#读书笔记]Cp3共享程序集和强命名程
Cp3共享程序集和强命名程序集 私有方式部署+全局方式部署:弱命名程序集+强命名程序集 强命名程序集使用发布者的公钥私钥进行签名,唯一标识发布者. 共享dll被全部复制到System32中 强命名程序 ...
- ES6 之 let / const
本博文配合 阮一峰 <ES6 标准入门(第3版)>一书进行简要概述 ES6 中的 let 与 const. 历史遗留问题 由于 JS ES3语法中的 var 提升变量.没有块级作用域,因而 ...
- error:no module named StringIO or cStringIO
一般遇到没有某个模块问题的时候,通常的解决方法是pip相应的模块: 不过,鉴于Python2和python3的不同(让人头疼) 解决方法:在python3中,该模块被新的模块取代,即io. 重新imp ...
- Python3 Tkinter-Radionbutton
1.创建单选按钮 from tkinter import * root=Tk() Radiobutton(root,text='b1').pack() Radiobutton(root,text='b ...