Angular - 在失去焦点时调用焦点事件答案

【问题标题】：Angular - Focus event being called on lost focusAngular - 在失去焦点时调用焦点事件
【发布时间】：2019-01-22 02:39:47
【问题描述】：

我在 Angular 和 chrome 中遇到了某种错误，我不太确定解决方案是什么，我的 Angular 应用程序具有自定义输入控件，这些输入在焦点 (focus)="someEvent($event) 上做了一些事情。这些输入是用户名和密码字段，因此 chrome 存储值。再次加载页面时，chrome 将应用存储的值，如果用户单击屏幕上的其他位置（不是输入组件），两个输入组件都会触发焦点事件。

我可以理解这是否发生在页面加载时，因为 chrome 可能会循环输入并应用存储的值，但是这发生在第一次鼠标单击页面上的任意位置之后。

有没有办法解释这些焦点事件是由自动填充功能引起的，而不是用户手动关注输入？

我有一些关于这些事件的代码，这些代码执行event.target.select() 来选择所有文本，而且奇怪的是...... 2 个输入最终卡在了焦点循环中。第一个获得焦点，然后是第二个，然后是第一个，然后是第二个，直到用户按下 Tab。

HTML：

<input [ngClass]="inputClass" [type]="this.type" [readOnly]="this.readonly || (this.ParentPanel && this.ParentPanel.readonly)" [ngStyle]="inputStyle" [disabled]="disabled || (this.ParentPanel && this.ParentPanel.disabled)" [(ngModel)]="value" (change)="Event_change($event)" (keyup)="Event_keyup($event)" (keydown)="Event_keydown($event)" (focus)="Event_focus($event)" maxlength="512"/>

TS：

Event_focus(event) {
    console.log('focus event' , event);
    if (this.selectAllOnFocus) {
      setTimeout(() => { // required to work with Edge (OnFocus happens before some browser properties are set)
        event.target.select();
      });
    }
    this.OnFocus.emit(event);
  }

谢谢。

【问题讨论】：

标签： javascript angular

【解决方案1】：

我想通了，在调用代码之前 - 我让它检查控件是否是文档 activeElement。

if (this.selectAllOnFocus && this.element && this.element.nativeElement === document.activeElement) { //do rest here }

这些似乎可以解决我的问题。

【讨论】：