html input組織自動補全


Mozilla 官方文檔建議

Mozilla developer documentation 建議使用表單設置屬性 tautocomplete=”off” 來阻止瀏覽器從cache獲取數據填充登錄表單。

 <input type="text" name="foo" autocomplete="off" /> 

但是這種方案不兼容某些Chrome、Firefox。

兼容所有瀏覽器

最終決定使用使用隱藏input來接受瀏覽器自動填充,這樣不會影響用戶體驗,也可以兼容所有瀏覽器。

  <input style="display:none"><!-- for disable autocomplete on chrome --> <input type="text" id="username" name="username" autocomplete="off"> 

但是實際上在Chrome上並沒什么用,在FireFox上也只能阻止用戶名自動填充。

接着搜索,又發現了個新東西

<input type="password" autocomplete="new-password"> 

把password的autocomplete屬性由off變成了new-password,發現Chrome不自動填充了,但是FireFox上仍然會填充用戶名

再接着結合第一點嘗試,最后結果是使用以下方式

 <input type="password" style="display: none;"/> <input type="text" autocomplete="off"/> <input class="form-control" type="password" name="tradePassword" id="txPassword" autocomplete="new-password" 

這樣在Chrome和FireFox上就都不會填充了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM