首先,HTML5 中有個新屬性autocomplete ,autocomplete 屬性規定表單是否應該啟用自動完成功能,它會自動完成允許瀏覽器預測對欄位的輸入。當使用者在欄位開始鍵入時,瀏覽器基於先前鍵入的值,應該顯示在欄位中填寫的選項。
如:
<form autocomplete=on> First name:<input type=text name=fname /><br /> Last name: <input type=text name=lname /><br /> E-mail: <input type=email name =email autocomplete=off /><br /> <input type=submit /></form><p>請填寫並提交此表單,然後重載頁面,來查看自動完成功能是如何運作的。 </p><p>請注意,表單的自動完成功能是開啟的,而e-mail 網域是關閉的。 </p>
會發現,autocomplete=on的會被記錄下來,而E-mail的autocomplete=off,再次輸入時不會被記錄。這就是HTML5中form的自動完成功能囉!
還不太清楚的可以去w3school手冊繼續學習。
如何關閉自動完成功能有時候我們希望關閉輸入框的自動完成功能,例如當使用者輸入內容的時候,我們希望使用AJAX技術從資料庫搜尋並列舉而不是在使用者的歷史記錄中搜尋。
關閉輸入框的自動完成功能有3種方法:
1、在IE的Internet選項選單裡的內容--自動完成裡面設置
2.設定Form的autocomplete為on或off來開啟或關閉自動完成功能
(關閉整個表單(form)自動提示功能)
3.設定輸入框(input)的autocomplete為on或off來開啟或關閉該輸入框的自動完成功能(關閉密碼域的自動完成)
測試程式碼:(在每個form輸入文字然後提交,然後再回來看看能否自動完成,注意要提交後才能有歷史記錄,才可能自動完成;提交後頁面可能出錯,不用管它,後退回去即可)
開啟自動完成功能的Form<br>
<form name=form1 autocomplete=on> 開啟自動完成功能的輸入框<input type=text autocomplete=on ><br> 關閉自動完成功能的輸入框<input type=text autocomplete=off><br> <input type =submit value=提交><br> </form>
關閉自動完成功能的Form<br>
<form name=form1 autocomplete=off> 開啟自動完成功能的輸入框<input type=text autocomplete=on><br> 關閉自動完成功能的輸入框<input type=text autocomplete=off><br> <input type =submit value=提交><br> </form>
建議:不要全部關閉自動完成功能,根據需要停用一部分自動完成功能即可,如果你覺得瀏覽器自帶的自動完成功能還不夠強大,可以使用jquery插件來實現更強大的自動提示完成功能。
例如百度搜尋框的自動提示功能就非常強大。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VeVb武林網。