解決瀏覽器自動填充賬號密碼行爲

這東西真的不是程序員的問題,但是沒辦法拿着別人的給的錢就必須解決。
如果你很急,就直接跳到最後一個看解決辦法。

首先爲什麼會出現這種情況

本人實驗了三個瀏覽器360瀏覽器、火狐瀏覽器、谷歌瀏覽器(都是最新版)
用戶在登錄網站時,登陸成功後瀏覽器會顯示是否保存密碼,有一個保存和一律不的選項。

點擊保存,大部分瀏覽器會記住用戶登陸時輸入用戶名的input標籤中屬性type的值,同時也記住輸入密碼的input標籤中屬性type的值。

But
360瀏覽器應該是也會記住input中的name值,因爲試了一下改name值也可以達到不讓瀏覽器自動填充的效果,但是火狐和谷歌並沒有用(找不到官方的說法,我只能通過表現來猜測)。

因此大部分瀏覽器保存密碼之後,下次會在相同屬性的input框中填充用戶名和密碼。這樣就容易出現用戶在有賬號並且點了瀏覽器保存的前提下,再次註冊時,驗證碼框和輸入密碼框被瀏覽器填充之前的賬號密碼(我猜測是瀏覽器檢測到input屬性是text並且下一個input屬性又是password的原因)

360瀏覽器那種是需要input的type和name屬性相同纔會填充。

火狐和谷歌瀏覽器解決辦法

只需要給輸入密碼的input標籤加一個屬性就可以:

<input type="password" name="password" autocomplete="new-password" />
不需要爲輸入登錄名的input標籤做更改

360瀏覽器解決辦法

首先我先使用的是改name的屬性
我是想要看一下瀏覽器是否都會保存name屬性來判斷從而填充密碼的想法,如果說都會判斷name來填充的話那麼我把name名字區分就不會在有這種情況,很可惜答案告訴我並不是。
以下是實驗步驟

這是原來記住的input:
<input name="name" type="text"/>
<input name="password" type="password"/>
改成:
<input name="plname" type="text"/>
<input name="plpassword" type="password"/>
目的達到瀏覽器不會填充
再試一下到底瀏覽器是不是會記錄name的值
<input name="plname" type="text"/>
<input name="password" type="password"/>
密碼填充了,用戶名沒填充,應該算是證實了我的想法
但是谷歌和火狐並並不會記錄input的name屬性。

那麼我把兩種辦法結合呢?

<input name="plname" type="text" />
<input name="password" type="password" autocomplete="new-password"/>
360瀏覽器把autocomplete="new-password"看作強制填充密碼,無論name值怎麼改都會把記住的用戶賬號密碼填入
這樣改name的值就不起作用,兩個方法相斥就很難受。

最直觀的方法

直接添加隱藏的input框給瀏覽器填充
<input name="name" type="text" style="z-index: -10;height: 1px;"/>
<input name="password" type="password" style="z-index: -10;height: 1px;"/>
複製一組input用於給瀏覽器自動填充用戶名和密碼,記住一定不能隱藏diplay:none,隱藏過後還會將下面的框賦值。
所以使用層級關係擋住input,把高度變不變小看你們的需求
<input name="name" type="text"/>
<input name="password" type="password"/>
  • 每個瀏覽器的自動填充都會有一些大同小異,我根據這三個瀏覽器來實驗的。如果你覺得和你瀏覽器表現不同應該是版本原因。
  • 就直接用直觀的方法把,不用擔心其他瀏覽器怎麼樣,如果還不行,就解決提出問題的人!哼哼
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章