一、autocomplete介紹
autocomplete是Html5中的新屬性。
該屬性規定輸入字段是否應該啟用自動完成功能。自動完成允許瀏覽器預測對字段的輸入。當用戶在字段開始鍵入的時候,瀏覽器基於之前輸入過的值,應該顯示出在字段中填寫的選項。
該屬性適用於<form>,以及下面的<input>類型。text,search,telephone,email,password,datepickers,range以及color.
該屬性有兩個值,on和off。
on是默認的,規定啟用自動完成功能。
off是規定禁用自動完成功能。
二、有關autocomplete = "off"失效
做項目的時候,有這個固然方便。但是當我們做用戶的找回密碼這樣的時候,或者重置密碼的時候,有這個就顯得不是那么好了。
當input的type為text的時候,autocomplete是乖乖的聽話的。但是當是paddword的時候,發現並沒有起作用。還是會提示密碼。這時候上網查了查方法,自己也試了。接下來總結一下。
1.先設置屬性readonly,然后在點擊那個元素的時候,再把readonly設置為false。我使用的是這種方法解決的。
html代碼
<input type="password" readonly="true" class="pwd" autocomplete="off">
js代碼(假設引入了jquery)
$(".pwd").on("click", function () {
$(this).attr("readonly", false)
})
2.先設置其type為text,單點擊的時候,再把其type改為password
html代碼
<input type="text" readonly="true" class="pwd" autocomplete="off">
js代碼(假設引入了jquery)
$(".pwd").on("click", function () {
$(this).attr("type", "text")
})
3.可以先寫好一個type為text的input框,寫一個type為password的input框。但是這個時候這個密碼框是隱藏的。當點擊文本框的時候。讓文本框消失,密碼框顯示。其實思路和上面是一樣的。
4.看網上還有一種說法,是把autocomplete的值寫為'new-complete'。網易登陸郵箱就是這樣寫的。但是這個方式我實驗了以后,是不可以的。你們可以試試哦~