防止瀏覽器記住或自動填寫用戶名和密碼(表單)的終極解決方案

最近項目上要求做到這一點，在網上搜了一圈，發現都是不完美的，不兼容全部的瀏覽器，於是只能自己摸索了，最終得出了終極解決方案：

 

涉及：

disabled 或 readonly 

 

display:none;   隱藏用，隱藏后不占位置

 

visibility:hidden;   隱藏用，隱藏后占原來的位置

 

position:absolute;z-index:-1;   隱藏用，隱藏與否取決於z-index相對的值，這里的-1是我自己用的

 

autocomplete:"off";  

網上說，這個屬性有時失效，有個解決辦法是將off改為new-password。

還有個說法(來自MDN)，之所以new-password能夠解決off失效的原因是autocomplete屬性的有效值只有on和off，默認值是on，

如果autocomplete的屬性是除on和off外的值，那么就是個無效值，那么瀏覽器就會放棄對該屬性的執行。

換句話說，除on和off外的任一值，可以隨便編都行。

在這里，我用off就夠了，測試過程中沒遇到失效的情況，所以暫時用off。

 

代碼如下：

（最簡潔）

 

<input type="text" name="name" value="admin" style="position: absolute;z-index: -1;" disabled autocomplete = "off"/><!-- 這個username會被瀏覽器記住，我隨便用個admin-->
<input type="password" name="pwd" value=" " style="position: absolute;z-index: -1;" disabled autocomplete = "off"/><!-- 這前面兩個name屬性要不要和真正的一樣，具體自己調試下 -->
<p><input type="text" maxlength="20" placeholder="用戶名" id="name" name="name" autocomplete = "off"/></p>
<p><input type="password" maxlength="20" placeholder="密碼" id="pwd" name="pwd" autocomplete = "off"/></p>
<p><input type="text" maxlength="4" placeholder="驗證碼"  id="vcode" name="vcode" autocomplete = "off"/><img id="vcode" title="點擊更換驗證碼" /></p>
<p><input type="button" value="登錄" id="login"/></p>
<p style="visibility: hidden;"><input type="password" name="pwd" value=" " style="position: absolute;z-index: -1;" disabled autocomplete = "off"/></p><!-- 這個password的值會被瀏覽器記住，我隨便用個空格 -->

或

 

 

<input type="text" value="admin" style="position: absolute;z-index: -1;" disabled autocomplete = "off"/><!-- 這個username會被瀏覽器記住，我隨便用個admin-->
<input type="password"  value=" " style="position: absolute;z-index: -1;" disabled autocomplete = "off"/>
<input type="text" name="name" style="display: none;" disabled autocomplete = "off"/><!-- 這里的autocomplete可以不要 -->
<input type="password" name="pwd" style="display: none;" disabled autocomplete = "off"/><!-- 這里的autocomplete可以不要 -->
<p><input type="text" maxlength="20" placeholder="用戶名" id="name" name="name" autocomplete = "off"/></p>
<p><input type="password" maxlength="20" placeholder="密碼" id="pwd" name="pwd" autocomplete = "off"/></p>
<p><input type="text" maxlength="4" placeholder="驗證碼"  id="vcode" name="vcode" autocomplete = "off"/><img id="vcode" title="點擊更換驗證碼" /></p>
<p><input type="button" value="登錄" id="login"/></p>
<p style="visibility: hidden;"><input type="password"  value=" " style="position: absolute;z-index: -1;" disabled autocomplete = "off"/></p><!-- 這個password的值會被瀏覽器記住，我隨便用個空格 -->

 

 

 

測試的瀏覽器：

ie瀏覽器（7~11，edge），360安全瀏覽器(全部模式)，360極速瀏覽器(全部模式)，谷歌瀏覽器，火狐瀏覽器，獵豹瀏覽器

 

分析以上代碼的原因：

有的瀏覽器會自動記錄登錄的賬號，並且會記錄第一個用戶名和最后一個密碼input。

對360安全瀏覽器，單數個的話360安全瀏覽器不會出現提示是否要保存密碼。

disabled：和360瀏覽器、頁面第一個聚焦點有關。

 

改進過程：

一開始是在真正要用到的用戶名密碼input前面加兩個對應name的隱藏用戶名密碼input，用於對付瀏覽器的自動填充表單。

但是，這個方案有個缺點：瀏覽器會記住登錄的賬號（有的瀏覽器會提示是否要記住），每當填寫密碼時（不用tab切換到，直接用鼠標獲得焦點），

會提示是否使用以下密碼。這樣別人不僅僅能夠登錄，並且還可以知道密碼的明文（瀏覽器審查元素改密碼input的type為text或在瀏覽器設置上查看保存的用戶名密碼）

 

經過N次的測試，發現= =瀏覽器只會記住第一個用戶名input的值和最后一個密碼input 的值，並且這些input不能用display：none。

 

於是在上面的基礎上，在前和后增加另一種隱藏方式的一組用戶名密碼input：用position:absolute;z-index:-1; 來隱藏

 

問題解決了，但是出現了一個小問題：360安全瀏覽器會提示是否記住密碼，並且，最重要的是，是輸入密碼的時候，還會提示是否使用以下項的密碼。

 

又經過N次的測試，發現，單數的input時，360安全瀏覽器不會再彈出是否記住密碼的提示。

 

最后發現，把最開始加的兩個display：none去掉也行，並且也是單數的input。

 

ok，完美。

 

結論：

 

<input type="text" value="admin" style="position: absolute;z-index: -1;" disabled autocomplete = "off"/><!-- 這個username會被瀏覽器記住，我隨便用個admin-->
<input type="password"  value=" " style="position: absolute;z-index: -1;" disabled autocomplete = "off"/>
<p><input type="text" maxlength="20" placeholder="用戶名" id="name" name="name" autocomplete = "off"/></p>
<p><input type="password" maxlength="20" placeholder="密碼" id="pwd" name="pwd" autocomplete = "off"/></p>
<p><input type="text" maxlength="4" placeholder="驗證碼"  id="vcode" name="vcode" autocomplete = "off"/><img id="vcode" title="點擊更換驗證碼" /></p>
<p><input type="button" value="登錄" id="login"/></p>
<p style="visibility: hidden;"><input type="password"  value=" " style="position: absolute;z-index: -1;" disabled autocomplete = "off"/></p><!-- 這個password的值會被瀏覽器記住，我隨便用個空格 -->

 

 

PS：z-index的值和autocomplete的值根據實際情況來調整。

對於具體的情況，每個人會有不同的表單，可能會出現布局啊什么的不完美，

可以根據添加一組或多組display：none 的用戶名密碼input和在input的外層加個<p style="visibility: hidden;"></p> 來調整顯示！

 

如果是表單，一樣的道理，這里不多說了。(注意要在表單里面加input)

 

如果不是登錄頁面，而是其他的頁面，如修改密碼的頁面，可以用小招：在舊密碼input前面加個隱藏的密碼input

 

<input type="password" style="display: none;" disabled autocomplete = "off"/>

 

 

如果其他的頁面，不只有密碼，還有用戶名input，那么與修改密碼頁面一樣，在前面加多個用戶名密碼input組合即可

 

<input type="text" style="display: none;" disabled autocomplete = "off"/>
<input type="password" style="display: none;" disabled autocomplete = "off"/>

 

或者(推薦)

 

<input type="text"  name="username" style="display: none;" disabled autocomplete = "off"/>
<input type="password" name="password" style="display: none;" disabled autocomplete = "off"/>

 

又或者(推薦)

 

<input type="text"  id="username" style="display: none;" disabled autocomplete = "off"/>
<input type="password" id="password" style="display: none;" disabled autocomplete = "off"/>

 

 

這里臨時的text和password要和真實的text、password的name或id值要一樣！！！

如：臨時text的id值和真實的text的name值一樣，或臨時text的name值和真實的name值一樣等等！！！

 

最后小tip：

每次登陸時（按回車或者點擊登錄），都將真正的用戶名密碼input置空比較好，處於安全考慮