Question

我使用ControlValueAccessor制作了一个自定义Angular（8.x）组件。使用两个或多个组件时，我在Safari（台式机和移动版）中有奇怪的行为。当我单击第二个输入元素时，焦点跳回到第一个。我在做什么错了？

请参见https://stackblitz.com/edit/angular-qcgefd。

一切都可以在Chrome和Firefox（台式机和移动设备）上正常运行

Answer 1

在文件fieldform.component.html中，您定义了一个ID和名称，其值为'username'。如果然后在表单中多次使用此组件。每个字段具有相同的名称和ID。显然Safari不喜欢这样。为了解决这个问题，您必须从fieldform.component中删除名称和ID。

fieldform.component.html的新代码。

<div class="RPnbM">
  <label class="dozyoM">
    <input [type]="type" class="fhJDUk" (focusin)="onFocusIn()" (focusout)="onFocusOut()" [(ngModel)]="value"/>
    <span class="gUpyls" [class.kPeLXy]="hasValue() && !hasFocus" [class.hisroG]="hasFocus" >{{label}}</span>
  </label>
</div>

带有Angular自定义组件（ControlValueAccessor）的Safari中的奇怪焦点行为

1 个答案: