js限制浏览器记住账号密码

最新推荐文章于 2024-05-08 13:11:25 发布

pg_li

最新推荐文章于 2024-05-08 13:11:25 发布

阅读量2.5k

点赞数

分类专栏： # angular # js基础

本文链接：https://blog.csdn.net/ligaoming_123/article/details/88890479

版权

angular 同时被 2 个专栏收录

57 篇文章 0 订阅

订阅专栏

js基础

45 篇文章 1 订阅

订阅专栏

使用框架为angualr6

1、输入框

关键： autocomplete="off"

<input nz-input name="txtUsername" formControlName="username"
       placeholder="请输入账户" autocomplete="off">

2、密码框

type="password" autocomplete="new-password" name="txtPassword"

<!--用于浏览器定位-->
<input type="password" name="txtPassword" style="display:none">
<!--暴露出去的输入框-->
<input nz-input type="password" autocomplete="new-password" 
    name="txtPassword" formControlName="password"placeholder="请输入密码" >

此时浏览器不会自定填充输入的账号和密码，但是还是为记录下来，当输入放入输入框时，还可以勾选填过的用户名和密码。

3、将密码框设置为type="text"，将值动态赋值给一个变量，然后将input的值修改为“●”

1）angualr

/**
   * 将密码框的值修改为'●'  angular的表单校验函数
   * @param val
   */
  static onchange(val) {
    const value = val.value;
    /**
     * 获取到当前的this
     * @type {UserLoginComponent}
     */
    const self: any = this;
    if (self.util.isString(value)) {
      const len = value.length;
      let str = '';
      for (let i = 0; i < len; i++) {
        str += '●';
      }
      const passwordValueLen = self.passwordValue.length;
      const passwordValue = self.passwordValue || '';
      if (passwordValueLen > len) {
        self.passwordValue = passwordValue.substr(0, passwordValueLen - (passwordValueLen - len));
      } else {
        self.passwordValue = passwordValue + value.substr(passwordValueLen,len - passwordValueLen);
    }
      document.getElementById('password')['value'] = str;
    }
  }

2）js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  密码框：<input id="password" placeholder="请输入密码"><br>
  <span id="passwordVal"></span>
  <script>
    window.onload = function() {
      const inputElement = document.getElementById("password");
      var flag = false;
      var passwordValue = '';
      function myFunction(e) {
        setTimeout(function () {
          var value = inputElement.value;
          if (!flag && typeof value == 'string') {
            const len = value.length;
            var str = '';
            for (var i = 0; i < len; i++) {
              str += '●';
            }
            const passwordValueLen = passwordValue.length;
            const passwordVal = passwordValue || '';
            if (passwordValueLen > len) {
              passwordValue = passwordVal.substr(0, passwordValueLen - (passwordValueLen - len));
            } else {
              passwordValue = passwordVal + value.substr(passwordValueLen,len - passwordValueLen);
            }
            document.getElementById('password')['value'] = str;
          }
          document.getElementById("passwordVal").innerHTML = "你的密码是: " + passwordValue;
        });
      }
      inputElement.addEventListener('compositionstart', function(e) {
        flag = true;
      });
      inputElement.addEventListener('compositionend', function(e) {
        flag = false;
      });
      inputElement.addEventListener('input', myFunction);
      inputElement.addEventListener('propertychange', myFunction);
    }
  </script>
</body>
</html>

pg_li

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js限制浏览器记住账号密码

使用框架为angualr61、输入框关键：autocomplete="off"<input nz-input name="txtUsername" formControlName="username" placeholder="请输入账户" autocomplete="off">2、密码框 type="password" autocompl...
复制链接

扫一扫

专栏目录