關於瀏覽器自動展示用戶名、密碼等輸入框的解決辦法

       最近發現一個bug，在瀏覽器提交用戶名和密碼之后，一般都會提示要不要記住密碼。假如選擇記住之后，那么有下次提交表單的時候，就會自動填充。雖然很方便，但是對於某些項目的部分功能，根據需求，是不需要記住的。需要采用一定的手段來阻止瀏覽器自動填充。

　　以下是對我百度到的解決辦法進行系統性的陳述。

　　（1）使用HTML屬性 autocomplete="off"

　　　　　由於autocomplete這個屬性沒有被寫入W3C規范，因此很多瀏覽器都會忽略這個屬性。導致無法禁用自動填充。

　　（2）使用js在頁面加載的時候設置input的value為空

　　　　　　由於瀏覽器的自動填充是在js執行完后再填充的。在使用js設置了input的value為空后，瀏覽器又把input自動填充，無法解決問題。並且對於一些特殊要求，比如說要在input文本框里面展示提示語，那么就不能置為空。

　　（3）使用document.getElementById("myForm").reset();

　　　　　在body中添加onload事件，可以實現重置操作，但是在使用了該方法后，頁面效果不好，會有閃現。

　　（4）增加<input type=”password”/>     這個方法在大部分版本的瀏覽器上是可行的，但是在某些高版本的瀏覽器和Safari中失效。

　　<!-- 額外增加的input -->    
　　<input type="text" style="width:0;height:0;float:left;visibility:hidden"/>
    <input type="password" style="width:0;height:0;float:left;visibility:hidden"/>
　　<!-- 原先的input -->
　　<input type="text" /> 
　　<input type="password"/>
　　

 

　　（5）增加form。 

　　　　　　此方法可以解決Safari下自動填充的問題，但是在某些高版本Chrome下失效。

<form class="layui-form" style="display:none">  
  <input type="text"/>
  <input type="password"/>  
</form> 

　　　（6）  結合（4）和（5）兩種方法

<form class="layui-form" style="display:none">  
  <input type="text"/>
  <input type="password"/>  
</form>  

<form class="layui-form" action="" name="userForm" id="userForm" method="post" onsubmit="return checkInfo();" style="overflow: hidden; margin-left: 18%; ">
    <input type="text" style="width:0;height:0;float:left;visibility:hidden"/>
    <input type="password" style="width:0;height:0;float:left;visibility:hidden"/>
	
  <div class="layui-form-item"style="width: 350px;margin-top: 20px;">
    <label class="layui-form-label">用戶名</label>
    <div class="layui-input-block">
      <input id="userID" maxlength="10" type="text" name="userID" placeholder="請輸入用戶名" autocomplete="off" class="layui-input"  onkeyup="this.value=this.value.replace(/\s+/g,'')"  >
    </div>
  </div>
<form

　　最后要提一下的就是，如果想要獲取input表單里面的值，那么對於增加的form和input不能設置id。

 

 

參考： http://blog.csdn.net/imdennisleung/article/details/51220387