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

前言：如果是同域名網站，並且曾經在該網站下登錄過賬號密碼，並且選擇了記住賬號密碼。chrome瀏覽器會對賬號密碼進行自動填充功能，雖然這功能給我們提供了很多方便，但是也帶來了些困擾。

 
一、問題起始
①當“密碼”那項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當成了"賬號"項進行了填充。

 
二、解決方法
<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>

 

三、解決方法（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