有關表單autocomplete = "off" 失效問題解決方案


一、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'。網易登陸郵箱就是這樣寫的。但是這個方式我實驗了以后,是不可以的。你們可以試試哦~


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM