时间戳

首页 > 解决方案 > 浏览器自动填充保存的凭据时如何在加载时设置焦点并移除焦点

javascript - 浏览器自动填充保存的凭据时如何在加载时设置焦点并移除焦点

问题描述

我在 angular6 中有一个简单的登录页面，我想在加载登录页面时将焦点设置为输入字段，如果浏览器自动填充保存的凭据，则删除焦点。

我正在使用简单的 javascript 将焦点设置在 ngOnInit() 上，document.getElementById("userName").focus(); 这会在登录页面加载时将焦点设置为输入（用户名）字段，但如果浏览器自动填充保存的详细信息，我想移除焦点。我尝试使用（更改）事件捕获值，但它不起作用。

请对此进行指导

谢谢

标签： javascripthtmlangular

解决方案

很少有浏览器实际上会在自动填充时触发输入更改事件。如果更改事件不起作用，请尝试将您的输入绑定到模型：

export class MyComponent {
  login: string;
  @ViewChild('loginInput') loginInput: ElementRef;
  
  ngOnInit() {
    this.loginInput.nativeElement.focus();
  }
  
  blurInput() {
    this.loginInput.nativeElement.blur();
  }
}
<input type="text" [ngModel]="login" (ngModelChange)="blurInput()" [ngModelOptions]="{ standalone: true }" #loginInput>

推荐阅读