天天看點

解決浏覽器自動填充密碼框的問題

今天解決了一個問題,就是萬惡的浏覽器自動填充密碼(ps:在不恰當的地方做了 不恰當的事)

解決前的圖檔:

解決浏覽器自動填充密碼框的問題

先聲明一下:我使用的頁面是ftl的靜态頁面。非html檔案。

這裡先不說廢話,先說我搜到的3種方法(js清空值的那種方法不考慮,怕有延遲會造成先有值,然後消失的情況,不友好):

1.把input type=”password” 改成 input type=”text” 并在後面加上 οnfοcus="this.type='password'"

<input type="text" name="pw" id="pw" required οnfοcus="this.type='password'" class="form-control"  />
           

2.在使用者名和密碼之間加上一個隐藏的文本框:

<input type="text" name="counts" id="counts" required class="form-control"  />
 <input type="password" style="display: none"/>
 <input type="password" name="pw" id="pw" required class="form-control" />
           

3.使用html5的屬性:

<input type="text" name="counts" id="counts" required class="form-control"  autocomplete="off"/>
 <input type="password" name="pw" id="pw" required  class="form-control"  autocomplete="off" />
           

說一下我使用各種方法的情況:

在我解決這個問題的時候,文本框裡面已經加入了html5的屬性,但是沒什麼卵用,是以第三種方法在我這裡不好用。

我試的一直是網上搜尋到的使用的最多的解決方法,第2種,加一個隐藏的密碼框,因為有說浏覽器會給第一個type為password的文本框填充。然後如果這個框中沒有id和name屬性的話,浏覽器是不會進行填充的。使用了以後,發現不隐藏的時候,谷歌浏覽器還真不填充了。但是我已設定display屬性,就不好用了。而且360浏覽器是會給最後一個密碼框指派,不隐藏也不管用。

不過如果一直點選進入這個頁面,過幾次,這個屬性就又管用了,沒找到原因。

第一種方法:進入頁面的時候,還真的沒有填充,我以為好用了,先輸入上面的文本框,然後輸入密碼,确實沒問題。但是當我先點選密碼的時候,悲劇發生了,自動填充又出來了。

最後的解決方法:(劃重點了)

    當我把第二個方法和第三個方法合起來用的時候,問題解決了。
<input type="text" name="counts" id="counts" required class="form-control"  autocomplete="off">
  <input type="password" style="display: none"/>
 <input type="text" name="pw" id="pw" required οnfοcus="this.type='password'" class="form-control"  autocomplete="off" >
           

解決後的圖檔:

解決浏覽器自動填充密碼框的問題

最後:  第三個方法我沒去掉,有興趣的可以試試。

美中不足,當我焦點在password,會給出下面的提示,如果滑鼠移動上去,還是會填充,滑鼠移開後就消失了:

解決浏覽器自動填充密碼框的問題

 歡迎讨論。。。