input[type=”password”] The input box prevents the chrome browser from popping up the user name and password drop-down box prompt

1. Phenomenon:

Framework: angular Environment: latest version of chrome  

After Google Chrome remembers the password, when the input box is password type, it will automatically display the saved username and password list;

As shown below:

code show as below:

<!-- 登录密码输入框代码  -->
<input nz-input [placeholder]="'Please input the password' | translate" formControlName="password" type="password" />

solution:

Solution 1: Add the attribute autocomplete="new-password" to the original basis, but the result fails . Clicking on the password box will still display a list of remembered passwords;

Solution 2: By setting the readonly attribute, the readonly attribute is controlled according to losing focus and getting focus, and the result is successful ; attach the code:

Statement three points :

     1. Why should I add id? In order to get the dom node.

     2. Why do I pass the id as a parameter in the focus control event? Because the current page has two input boxes of type password box for reuse.

     3. Can the focus control event not use delay? No, if the delay is not used, it cannot be called normally, the mouse has been clicked, but the input box is still in a read-only state at this time.

The wordy is over, the correct code:

HTML code

<!-- 注册页面登录密码输入框 增加【id autocomplete readonly onfocus onblur】属性 -->
<input nz-input [placeholder]="'Please input the password' | translate" formControlName="password" type="password" id="pwd" autocomplete="off" readonly onfocus="removeAttr('pwd')" onblur="setAttr('pwd')" />
<!--确认密码输入框 -->
<input nz-input [placeholder]="'Please input the password again' | translate" formControlName="confirmPw" type="password" id="confirmPw" autocomplete="off" readonly onfocus="removeAttr('confirmPw')" onblur="setAttr('confirmPw')" />

JavaScript code 

export class RegisterComponent implements OnInit, AfterViewInit {

  constructor(
    ...
  ) {
    window['removeAttr'] = this.removeAttr.bind(this);
    window['setAttr'] = this.setAttr.bind(this);
  }

  
   .....


  // 移除密码框类型的只读属性
  public removeAttr(idName) {
    setTimeout(() => {
      document.getElementById(idName).removeAttribute('readonly');
    }, 300)
  }
  // 增加密码框类型的只读属性
  public setAttr(idName) {
    setTimeout(() => {
      document.getElementById(idName).setAttribute("readonly", 'true');
    }, 300)
  }
}

Effect:

At present, although the effect is normal if it is operated normally, there are still the following shortcomings after testing, which need to be resolved, and will be updated after resolution:

1. Click the mouse continuously in the input box, and the password prompt list will be displayed again;

2. When entering a password and then deleting the password as empty, the password prompt list will be displayed again;

5.14 Update: The two problems left over from last time have finally been solved, refer to the link: https://blog.csdn.net/qq_35264415/article/details/105160728

The final perfect solution:

The HTML part is unchanged:

<!-- 之前的两个输入框代码没有变动 -->
<input nz-input [placeholder]="'Please input the password' | translate" formControlName="password" type="password" id="pwd" autocomplete="off" readonly onfocus="removeAttr('pwd')" onblur="setAttr('pwd')" /> 

<input nz-input [placeholder]="'Please input the password again' | translate" formControlName="confirmPw" type="password" id="confirmPw" autocomplete="off" readonly onfocus="removeAttr('confirmPw')" onblur="setAttr('confirmPw')" />

JS part:

  // 移除密码框类型的只读属性
  public removeAttr(idName) {
    document.getElementById(idName).addEventListener('click', this.handleClick);
    document.getElementById(idName).addEventListener('keydown', this.handleKeydown);
    document.getElementById(idName).addEventListener('mousedown', this.handleMousedown);
    //使用setTimeout，告诉JS是异步执行，这样子，就可以阻止第一次点击获取焦点时，下拉用户密码清 
    //单的框的出现
    setTimeout(() => {
      //获取焦点时 同时去除只读，这样可以获取光标，进行输入
      document.getElementById(idName).removeAttribute('readonly');
    }, 300)
  }


  // 增加密码框类型的只读属性
  public setAttr(idName) {
    //失去焦点立马更新为只读
    document.getElementById(idName).setAttribute("readonly", 'true');
  }


  // 点击事件
  private handleClick(e) {
    //为什么先失去焦点，在获取焦点，这样子可以避免第二次或更多次连续点击输入框时，出现的用户密 
    // 码清单的框可以快速去除
    if (e.type === 'click') {
      document.getElementById(e.target.id).blur();
      document.getElementById(e.target.id).focus();
    }
  }

  // 监听键盘输入事件
  // 当keyCode=8(backspace键) 和 keyCode=46(delete键)按下的时候，判断只剩下最后一个字符的时 
  // 候阻止按键默认事件，自己清空输入框
  // 当keyCode=8(backspace键) 和 keyCode=46(delete键)按下的时候，判断如果处于全选状态，就阻 
  // 止按键默认事件，自己清空输入框
  // 这种用来避免删除最后一个字符完后出现下拉用户密码清单的框
  private handleKeydown(e) {
    if (e.type === 'keydown') {
      const keyCode = e.keyCode;
      // 和JS不一样，TS中写法如此，不然报类型“HTMLElement”上不存在属性“value”
      const passwordText =  (<HTMLInputElement>document.getElementById(e.target.id));
      if (keyCode === 8 || keyCode === 46) {
        //backspace 和delete
        const len = passwordText.value.length;
        if (len === 1) {
          passwordText.value = "";
          return false;
        }
        if (e.target.selectionStart === 0 && e.target.selectionEnd === len) {
          passwordText.value = "";
          return false;
        }
      }
      return true;
    }
  }
  
  //用来阻止第二次或更多次点击密码输入框时下拉用户密码清单的框一闪而过的问题
  private handleMousedown(e) {
    if (e.type === 'mousedown') {
      document.getElementById(e.target.id).blur();
      document.getElementById(e.target.id).focus();
    }
  }

Effect: