前端解決使用者登入時，禁止chrome提示使用者儲存密碼
阿新 • • 發佈：2021-09-13
網上很多方法，大多都是不生效的，在谷歌瀏覽器下依然存在問題。
比如以下方法：
1、為密碼框input新增autocomplete="off"屬性
2、改變readonly屬性
<input type="password" class="layui-input" autocomplete="new-password" readonly onfocus="this.removeAttribute('readonly');" onblur="this.setAttribute('readonly',true);" />
3、在前面加一個隱藏的input框
<input type="password" class="layui-input" style="display: none;"/> <input type="password" class="layui-input" autocomplete="off" />
以上3種無法解決問題，原因是type="password"的時候，瀏覽器就會彈出提示框，所以type不能是password。
可以將type設定為text，然後用設定style屬性為-webkit-text-security:disc; 這樣輸入的text會變為....
以下是谷歌的解決方案
<html> <head> <title> Remove Save Password Pop Up For Chrome </title> <style> #txtPassword{ -webkit-text-security:disc; } </style> </head> <body> <input type="text" id="txtUserName" /> <br /> <input type="text"id="txtPassword" /> <br /> </body> </html>
火狐的解決方案
<html> <head> <title> Remove Save Password Pop Up For Mozilla </title> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"> <script> function RemoveSavedPassword() { if (jQuery.browser.webkit == undefined) { inputValue = $('.real-input').val(); numChars = inputValue.length; showText = ""; for (i = 0; i < numChars; i++) { showText += "•"; } $('.fake-input').html(showText); } } </script> </head> <body> <div class="input-box"> <label>Enter password:</label> <div class="fake-input"></div> <input type="text" onKeyUp="RemoveSavedPassword()" class="real-input"> </div> </body> </html>
可參考一下連結
https://stackoverflow.com/questions/32775342/how-to-disable-chromes-saved-password-prompt-setting-through-javascript