【html】巧妙解決input標籤自動填充問題

前言：若是是同域名網站，而且曾經在該網站下登陸過帳號密碼，而且選擇了記住帳號密碼。chrome瀏覽器會對帳號密碼進行自動填充功能，雖然這功能給咱們提供了不少方便，可是也帶來了些困擾。

 
1、問題起始
①當「密碼」那項input的type是text的時候並不會出現問題

<label>
<span>卡號:</span>
<input type="text" name="userName" placeholder="請輸入卡號" autocomplete="off">
</label>
<label>
<span>密碼:</span>
<input type="text" name="password" placeholder="請輸入密碼" autocomplete="off">
</label>

 

②當「密碼」那項input的type改爲password的時候，問題就出現了。

<label>
<span>卡號:</span>
<input type="text" name="userName" placeholder="請輸入卡號" autocomplete="off">
</label>
<label>
<span>密碼:</span>
<input type="password" name="password" placeholder="請輸入密碼" autocomplete="off">
</label>

這時會發現，瀏覽器對input進行了自動填充，並且背景顏色變成了淡黃色，這淡黃色的背景顏色是沒法修改了。爲何把input的type改爲password，就會發生自動填充呢？個人猜測是chrome瀏覽器對type="password"進行了識別，並把"密碼"項進行了填充，而且把"密碼"項前面input當成了"帳號"項進行了填充。

 
2、解決方法
<label><span></span><input type="text" name="hidden1" ></label>
<label><span></span><input type="password" name="hidden2" ></label>
<label>
<span>卡號:</span>
<input type="text" name="userName" placeholder="請輸入卡號" autocomplete="off">
</label>
<label>
<span>密碼:</span>
<input type="password" name="password" placeholder="請輸入密碼" autocomplete="off">
</label>
向這樣，在"帳號""密碼"項前面添加多兩個input標籤，並新添的第二個input標籤的type="password"看執行效果。

 

這時候就能夠發現，新添的兩個input標籤就被自動填充了，而"帳號""密碼"框再也不會被進行自動填充了，不可貴出chrome瀏覽器只對帶password的前兩個input標籤自動填充。最後只須要進行收尾，把前面兩個input進行隱藏就能夠了。（經過網友的反饋：直接經過display進行隱藏的話，第二password仍是會出現密碼提示，可是經過width:0; height:0;的方式進行「隱藏」能很好的解決這個問題）。

<label><span></span><input type="text" name="hidden1" style="width:0; height:0;"></label>
<label><span></span><input type="password" name="hidden2" style="width:0; height:0;"></label>
<label>
<span>卡號:</span>
<input type="text" name="userName" placeholder="請輸入卡號" autocomplete="off">
</label>
<label>
<span>密碼:</span>
<input type="password" name=password" placeholder="請輸入密碼" autocomplete="off">
</label>

 

3、解決方法（2）
<label>
<span>卡號:</span>
<input type="text" name="userName" placeholder="請輸入卡號" autocomplete="new-password">
</label>
<label>
<span>密碼:</span>
<input type="password" name=password" placeholder="請輸入密碼" autocomplete="new-password">
</label>
有網友提供了新的方法來解決該問題(經過給input標籤條件autocomplete="new-password")，發現也能解決這個問題，至於有無其餘的衍生問題，博主並無去檢驗了，以爲第一種方法太麻煩的朋友，不妨能夠試試該種方法。
————————————————
版權聲明：本文爲CSDN博主「汪小穆」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處連接及本聲明。
原文連接：https://blog.csdn.net/w390058785/java/article/details/80512591