Question

我有一个有序表，在一个实体上具有一个字段，您可以更改该字段以“重新排列”表上的该行：

 <table>
  <thead>
    <th>Rank</th>
    <th>Name</th>
  </thead>
  <tbody>
    <tr *ngFor="let entity of entities">
      <td>
        <input *ngIf='entity === currentEntity' 
                value="{{entity.Rank}}" 
                type="number" 
                min="1"
                max="{{entities.length}}"
                (change)="updateRank(entity, $event)">
        <span *ngIf='entity !== currentEntity'>{{entity.Rank}}</span>
      </td>
      <td>
        <span>{{entity.Name}}</span>
      </td>
    </tr>
  </tbody>
</table>

因此，数字输入仅适用于当前实体，并且在更改后，我在后端将它们重新排序并更新UI上的顺序。

这很好用，但是问题是当您使用箭头键更改等级时，仅在降低等级时才保留焦点。当您提高排名时，焦点将从输入框中移出。

JsFiddle：https://jsfiddle.net/JustinDao/t0hwLu4b/（在Chrome或Firefox上尝试）

我认为这是由于Angular如何创建DOM元素引起的，但我不确定。在提高排名时，我还能保持焦点吗？

Answer 1

http://jsfiddle.net/JustinDao/mcu1tb90

解决方法是执行setTimeout以将焦点放在input上。

将input对象传递给方法：

<input #myInput
       *ngIf='entity === currentEntity' 
       value="{{entity.Rank}}" 
       type="number" 
       min="1"
       max="{{entities.length}}"
       (change)="updateRank(entity, $event, myInput)">

然后在updateRank

updateRank(entity, event, inputObject) {
    ....
    setTimeout(() => {
        inputObject.focus();
    });
}

http://stackoverflow.com/questions/33955650对此进行了解释。基本上，DOM元素尚不存在，因此您可以使用.focus()与setTimeout排队消息，以便DOM更新，然后进行.focus()调用。

如何通过更改输入数字字段在Angular 5中保持焦点？

1 个答案: