查看模态后将焦点返回到上一个输入

Question

我正在开发一个 Angular 应用程序，其中有一个包含许多输入的表单需要填写。 在填写表单时，用户可以选择打开一个模式，他们可以在其中使用热键输入注释。 我想要做的是，一旦用户关闭模态，将焦点返回到先前聚焦的输入字段。

到目前为止，我似乎有一个可行的解决方案，但它似乎非常乏味，我不确定这是否是执行此类操作的最佳方法。

在每个input字段上，我都有一个(focus)将变量prevFocus设置为输入名称。 例如：

<input
  (focus)="prevFocus = 'customerName'"
  name="customerName"
  placeholder="Name"
  type="text"
  pInputText
  formControlName="customerName"
/>

这个变量被存储，当用户关闭模态时，会调用一个函数：

closed() {
  console.log(this.prevFocus);
  setTimeout(() => {
    this.setFocus(`${this.prevFocus}`);
  });
}

setFocus(name) {
  const ele = this.form.nativeElement[name];
  if (ele) {
    ele.focus();
  }
}

setTimeout()用于确保在加载组件后填充输入。

我的问题是，我有超过 80 个输入字段，对于每个输入来说这似乎很乏味。 但是，这是最好的方法吗？ 有没有人做过类似的事情，在做不同的动作或暂时失去焦点后焦点会返回？

这里是我创建的 Stackblitz 来展示我在看什么。 有一些功能，例如热键快捷方式，我正在使用 PrimeNG 库。 该库和其他函数与返回到先前聚焦的输入的特定关注无关，但它们被包含在内以获得完整的用户体验：以输入为焦点开始填写表单 → 使用热键 (alt + a) 打开modal → 单击esc或单击 x 关闭 → 输入焦点返回。

Answer 1

您可以使用document.activeElement保存当前焦点元素并在关闭模态后调用activeElement.focus()

为可聚焦元素创建类型

export type FocusableElement = HTMLInputElement | HTMLSelectElement // add more if you wan

以及设置 activeElement 的代码

activeElement:FocusableElement

constructor(
    private eventManager: EventManager,
    @Inject(DOCUMENT) private document: any
  ) {
    this.addShortcut({ keys: 'alt.a' }).subscribe(() => {
      this.activeElement = document.activeElement as  FocusableElement;
      this.showModalDialog();
    });
  }

closed() {
  setTimeout(() => {
    if(this.activeElement){
      this.activeElement.focus()
    }
  });
}

Answer 2

如果（如 stackblitz 示例所示）所有控件或多或少都相同，但它们之间只有一些变化，您可以改为创建具有所需属性的对象数组； 例如：

     const formList= [
       { name: "customerAddress"
        placeholder: "Address"
        type: "text"
        name: "customerAddress"
        formControlName: "customerAddress"}
    ]

然后在 HTML 中循环遍历它只设置一次：

 <form #form>
        <ng-container *ngFor="formItem of formList">
              <input
                (focus)="prevFocus = formItem.name"
                [name]=formItem.name
                [placeholder]=formItem.placeholder
                [type]=formItem.placeholder
                pInputText
                [formControlName]=formItem.formControlName
              />
    </ng-container>
</form>

如果您可能有除 input 之外的其他元素，您可以使用基于type属性的 Case 语句来根据type创建不同的元素。 这也将允许您灵活地在数组中添加任何新字段并自动创建。