'autocomplete="off"'在Chrome 中不起作用

加油_linda

‘autocomplete="off"‘在Chrome 中不起作用

我们在表单输入框中输入信息,提交表单后,当我们再次进入表单页面,双击输入框时,会出现之前提交的信息,这是因为浏览器一般会记录下输入框之前提交表单的信息。这就是这篇文章要讲的autocomplete.

AutoComplete控件就是指用户在文本框输入前几个字母或是汉子的时候,该控件就能从存放数据的文本或是数据库里将所有以这些字母开头的数据提升给用户,供用户选择,提供方便。

输入框(input,textarea, select)的AutoComplete的默认值是on,其含义代表是否让浏览器自动记录之前输入的值。

有时用户不希望记录之前输入的值,这时就需要关闭AutoComplete。

1. 我们通过在form表单上加入,或者对一些输入框单独加入autocomplete="off",就能达到关闭AutoComplete的目的。

1.1 在form表单上加入autocomplete="off".  

  <form method="post" action="login.php" name="login" autocomplete="off">

  </form>

1.2 在输入框中加入autocomplete="off"

  <input id="username" type="text" name="username" maxlength="20"  autocomplete="off">

2. 但是有一种情况例外,就是表单中有input[type="password"],点击保存密码后,在Chrome浏览器则自动填充了用户名和密码的输入框,而IE和Firefox则不同。为了统一浏览器样式,我们需要就Chrome的问题修改。

提供3钟解决方法

2.1 修改value值

(function(){
  if(navigator.userAgent.toLowerCase().indexOf("chrome") != -1){
    var selectors = document.getElementsByTagName("input");
    for(var i=0;i<selectors.length;i++){
    if((selectors[i].type !== "submit") && (selectors[i].type !== "password")){
      selectors[i].value = " ";
    }
  }
  setTimeout(function(){
    for(var i=0;i<selectors.length;i++){
      if(selectors[i].type !== "submit"){
        selectors[i].value = "";
      }
    }
  },100)
  }
})()

2.2 修改disabled属性

(function(){
  if(navigator.userAgent.toLowerCase().indexOf("chrome") != -1){
    var selectors = document.getElementsByTagName("input");
    for(var i=0;i<selectors.length;i++){
    if((selectors[i].type !== "submit") && (selectors[i].type !== "password")){
      selectors[i].disabled= true;
    }
  }
  setTimeout(function(){
    for(var i=0;i<selectors.length;i++){
      if(selectors[i].type !== "submit"){
        selectors[i].disabled= false;
      }
    }
  },100)
  }
})()

2.3 removes "name" and "id" attributes

(function(){
  if(navigator.userAgent.toLowerCase().indexOf("chrome") != -1){
    var selectors = document.getElementsByTagName("input");
    for(var i=0;i<selectors.length;i++){
      if((selectors[i].type !== "submit") && (selectors[i].type !== "password")){
        var input = selectors[i];
        var inputName = selectors[i].name;
        var inputid = selectors[i].id;

        selectors[i].removeAttribute("name");
        selectors[i].removeAttribute("id");
        setTimeout(function(){
          input.setAttribute("name",inputName);
          input.setAttribute("id",inputid);
        },1)
      }

    }

  }
})()

个人比较推荐第三种方法,通过移除input的name和id来达到效果

'autocomplete="off"'在Chrome 中不起作用

时间: 2025-01-02 16:35:26

'autocomplete="off"'在Chrome 中不起作用的相关文章

《转》&#39;autocomplete=&quot;off&quot;&#39;在Chrome中不起作用解决方案

最近项目中遇到一个令人头疼的问题,查阅各种资料,尝试各种方法,最终得以解决:哎···下面就说说这心酸的历程吧. 大家都知道autocomplete属性是表单字段中的HTML5新属性,该属性有两种状态值,分别为"on" 和 "off",该属性可省略:省略属性值后默认值为"on",也可以省略属性名,直接写入关键字on或off. 网站项目中,有登录和注册的弹框,在除chrome的浏览器中一切都ok,一旦在谷歌浏览器中,问题来了:首先从登录弹框中登陆成功

248 闭包:概念,作用,案例,思考题案例,chrome 中调试闭包

5.1 变量的作用域复习 变量根据作用域的不同分为两种:全局变量和局部变量. 函数内部可以使用全局变量. 函数外部不可以使用局部变量. 当函数执行完毕,本作用域内的局部变量会销毁. 5.2 什么是闭包 闭包(closure):指有权访问另一个函数作用域中的变量的函数. 简单理解就是 ,一个作用域可以访问另外一个函数内部的局部变量. [被访问的局部变量所在的函数,就是闭包函数] <!DOCTYPE html> <html lang="en"> <head&g

chrome中workspace配置达到同步修改本地文件的作用

在前端开发中,我们经常需要在浏览器中进行调试,特别是一些样式的修改,如果你还是先在浏览器elements中调试好在复制到本地文件,那就真的out了. chrome浏览器的workspace功能完全可以帮你实现同步修改,但需要一些设置.好了,废话不多说,先看下面的例子: 1.在chrome中打开本地html文件,F12,打开调试器 2.在右上角的选择菜单中选择setting 3.在左侧菜单栏中选择workspace,并点击add folder添加项目目录所在文件夹 4.点击add,添加mappin

Chrome 中的 JavaScript 断点设置和调试技巧

你是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~,用这两种土办法确实解决了很多小型 JavaScript 脚本的调试问题.不过放着 Chrome 中功能越发强大的开发者工具不用实在太可惜了.本文主要介绍其中的 JavaScript 断点设置和调试功能,也就是其中的 Sources Panel(以前叫 Scripts).如果你精通 Eclipse 中的

去除chrome中input的黄底色

在chrome中,input框总是出现黄底色,使用!important;也不好使,很烦人,下面方法可以解决        input:-webkit-autofill {             -webkit-box-shadow: 0 0 0 1000px white inset;         }         input[type=text]:focus, input[type=password]:focus{             -webkit-box-shadow: 0 0 

javascript中defer的作用

javascript中defer的作用 <script src="../CGI-bin/delscript.js" defer></script>中的defer作用是文档加载完毕了再执行脚本,这样回避免找不到对象的问题 加上 defer 等于在页面完全在入后再执行,相当于 window.onload ,但应用上比 window.onload 更灵活!defer是脚本程序强大功能中的一个"无名英雄".它告诉浏览器Script段包含了无需立即执行

web.xml的配置中&lt;context-param&gt;配置作用

<context-param>的作用: web.xml的配置中<context-param>配置作用1. 启动一个WEB项目的时候,容器(如:Tomcat)会去读它的配置文件web.xml.读两个节点: <listener></listener> 和 <context-param></context-param> 2.紧接着,容器创建一个ServletContext(上下文),这个WEB项目所有部分都将共享这个上下文. 3.容器将&l

java中super的作用

super()的作用 super可以用来访问超类的构造方法和被子类所隐藏的方法,如果子类中有方法与超类中的方法名称和参数相同,则超类中的方法就被隐藏起来,也就是说在子类中重载了父类中的方法. 引用父类中所隐藏的语法格式如下: super(参数列表)或super.方法名(参数列表) 下面通过代码展示一下super的用法: package cn.demo; public class Demo1 { public static void main(String[] args) { SubClass_A

在 Chrome 中调试 Android 浏览器

最近需要使用 Chrome Developer Tools 调试 Android 浏览器,但是官方指南并不是很好使,经过一番折腾,终于调试成功了,在此把经验分享给需要的朋友. Chrome Developer Tools 是前端工程师必不可少的工具,它极大的提高了我们的开发调试效率.在移动开发的时代,我们也必须掌握手机浏览器在 Chrome 中调试的方法.本篇仅介绍 Android. 环境 不同的环境可能存在一些差异,我的环境是: Windows 10 电脑 Chrome 50.0.2661.7