前端解决用户登录时，禁止chrome提示用户保存密码

网上很多方法，大多都是不生效的，在谷歌浏览器下依然存在问题。

比如以下方法：

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 += "&#8226;";
        }
        $('.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

posted @ 2021-09-13 10:50  深如墨&淡如水  阅读(2459)  评论(0)  编辑  收藏  举报