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

摘要:
大家都知道autocomplete属性是表单字段中的HTML5新属性,该属性有两种状态值,分别为"on"和"off",该属性可省略:省略属性值后默认值为"on",也可以省略属性名,直接写入关键字on或off。如何解决呢,一下提供几种方法1、修改value值if(navigator.userAgent.toLowerCase().indexOf("chrome")!=="submit"){inputers[i].value="";}}},100)}2、修改disabled属性if(navigator.userAgent.toLowerCase().indexOf("chrome")!=="submit"){inputers[i].disabled=false;}}},100)}设计师导航https://www.wode007.com/favorites/sjdh3、去除输入框的name和id属性if(navigator.userAgent.toLowerCase().indexOf("chrome")!

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

网站项目中,有登录和注册的弹框,在除chrome的浏览器中一切都ok,一旦在谷歌浏览器中,问题来了:首先从登录弹框中登陆成功,chrome会弹出是否保存密码的提示框,点击保存密码按钮后,就会出现表单自动填充的问题,如图,如果用户和密码都自动填充,那么在某些网站中将非常的不安全,如支付网站。

解决autocomplete=off在Chrome中不起作用的方法第1张

如何解决呢,一下提供几种方法

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)  
            }

设计师导航https://www.wode007.com/favorites/sjdh

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');"/>

免责声明:文章转载自《解决autocomplete=off在Chrome中不起作用的方法》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇android intent 跳转Python 连接redis密码中特殊字符问题下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

2020终于解决Chrome浏览器“崩溃啦”的问题!

Google的chrome莫名其妙突然所有页面都显示“喔唷 崩溃啦”,各种插件在右下角弹出报错!这个问题我之前遇到过一次,后来通过改快捷方式的名字解决了。可是这次,隔离回来上班,打开电脑,又一次出现这种现象。折腾了一上午,各种方法都试过了,最后终于解决了。 尝试失败的方法 网上虽然有很多回答,但历史悠久,有可能之前这些方法确实有用,但现在对我统统不管用!为...

在线考试实现倒计时的代码

<!doctype html><html><head> <meta charset="utf-8"> <title>倒计时js代码 - 懒人建站 http://www.51xuediannao.com/</title></head> <body> 倒计时js代码...

chrome浏览器下JavaScript实现clipboard时无法访问剪切板解决方案

在用JavaScript实现某个简单的复制到剪切板功能的时候,会考虑一下浏览器兼容性,主要是重点在IE和FireFox,把这个两个浏览器搞定后,基本上其他浏览器也不用太操心了,Chrome也一样,没出什么问题。但是Chrome用的好好的,突然过了一个月,就无法实现复制到剪切板了。一时不知道什么原因。网上查了一下,有这样一原因:安全问题,浏览器默认禁止访问剪...

perl 中的my和全局变量

$Some::stuff 使用包some的标准变量$stuff our 把名字限制于一个作用域, local 把值限制于一个作用域, my 把名字和值都限制于一个作用域 my变量: [root@master Webqq]# cat t5.pl {my $var=11;print "$var is 1--$var ";}{print "$va...

图片轮播插件-carouFredSel

carouFredSel图片轮播插件基于Jquery,比较常规的轮播插件,支持滚轮及键盘左右按键,加入其它插件可实现更加复杂的特效。 主页地址:http://caroufredsel.dev7studios.com/ 例子: html: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio...

基于Python的Web应用开发实战——3 Web表单

第2章中介绍的 请求对象 包含客户端发出的所有请求信息。 其中, request.form 能获取 POST请求 中提交的表单数据。 尽管Flask的请求对象提供的信息足够用于处理Web表单,但有些任务很单调,而且要重复操作。 比如,生成表单的HTML代码和验证提交的表单数据。 Flask-WTF(https://flask-wtf.readthedocs...