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

使用框架为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>

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

猜你喜欢