Question

我遇到了一些我相信与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);
  }

谢谢。

Answer 1

我发现了这一点，在调用代码之前-我先检查控件是否为文档activeElement。

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

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

Angular-焦点事件被称为失去焦点

1 个答案: