‘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来达到效果