《转》'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优步司机奖励政策(12月21日-12.27日)
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- YARN 与Maprd 配置
<!-- yarn 配置 --> <!-- yarn-sit.xml --> <property> <name>yarn.resourcemanager ...
- 通过反编译看Java String及intern内幕--费元星站长
通过反编译看Java String及intern内幕 一.字符串问题 字符串在我们平时的编码工作中其实用的非常多,并且用起来也比较简单,所以很少有人对其做特别深入的研究.倒是面试或者笔试的时候,往 ...
- C++ 基础面试题-1
请说出下面代码在32位系统下的输出内容 /* ** 2018/03/21 21:43:00 ** Brief: ** Author:ZhangJianWei ** Email:Dream_Dog@16 ...
- Windows运行机理——窗口句柄和消息
Windows运行机理这系列文章都是来至于<零基础学Qt4编程>——吴迪,个人觉得写得很好,所以进行了搬运和个人加工 现在我们将消息与句柄联系起来.假如有一个窗口,且拥有该窗口的一个句柄( ...
- 用Anko和Kotlin实现Android上的对话框和警告提示(KAD 24)
作者:Antonio Leiva 时间:Mar 9, 2017 原文链接:https://antonioleiva.com/dialogs-android-anko-kotlin/ 借助Builder ...
- 第3章 TCP协议详解
第3章 TCP协议详解 3.1 TCP服务的特点 传输协议主要有两个:TCP协议和UDP协议,TCP协议相对于UDP协议的特点是 面向连接使用TCP协议通信的双方必须先建立连接,完成数据交换后,通信双 ...
- 【sessionInfo】使用说明
对象:sessionInfo 说明:会话类型操作,此对象是session与cookies的完善版,解决了session异常丢失及cookies文件大小的问题. 注意: 1) 访客的IP地址发生变化时 ...
- Leetcode - 557. Reverse Words in a String III (C++) stringstream
1. 题目:https://leetcode.com/problems/reverse-words-in-a-string-iii/discuss/ 反转字符串中的所有单词. 2. 思路: 这题主要是 ...
- leetcode个人题解——#20 Valid Parentheses
class Solution { public: bool isValid(string s) { stack<char> brackts; ; i < s.size(); i++) ...