如何在弹出窗口打开后立即将选项卡焦点放在弹出窗口上，而不是将焦点放在先前选择的值上

Question

我使用了自定义弹出模式来接收来自用户的确认消息。在这里，我有一些基于焦点的输入字段，如果必须从用户那里获取任何验证/确认消息，则会打开弹出消息。当弹出窗口打开时，选项卡焦点将在背景中已经选择的值上而不是在弹出窗口上，如果我使用选项卡，它会转到背景中的下一个输入字段，而不是将焦点放在弹出窗口上。我该如何处理这个问题？这里基于选项卡焦点到按钮enter/spacebar 它需要那个特定按钮的事件。我使用了一个指令来处理键盘中“ESC”上的按键。在这里，我想处理这些事情，但不知道如何使其发挥作用。1.这里默认如果只有一个按钮，那么标签焦点必须在“确定”按钮上，如果有2个按钮说“确定”和“取消”标签焦点在“确定”按钮上。2. 通过使用选项卡/鼠标，我必须能够在按钮之间切换。需要帮助。

演示： 演示

为了获得弹出窗口，我使用了服务文件：

服务.ts：

activate: (header?: string,message?: string, ok?: string,cancel?:boolean) => Promise<boolean>;

HTML：

 <input type="text" class="form-control" placeholder="Group Code" name="groupCode"
               name="groupCode" (blur)="tabOpen()">

:

  tabOpen() {
    this.notificationService.activate("Validation Message", "First POP UP? ", "Yes").then(responseOK => {
        if (responseOK) { }
      });
  }

基于此，blurout我正在调用该服务并显示弹出窗口。一旦弹出窗口打开，我希望选项卡焦点位于该弹出窗口上，而不管背景屏幕上的弹出窗口是什么。但关键功能应该只用于弹出窗口，当弹出窗口关闭时，再次控制回到后台的特定字段并相应地起作用。

Answer 1

我可以通过向弹出窗口组件文件添加一个函数并在弹出窗口打开时调用相同的函数来完成这项工作。

TS：

public focusFirstFocusableChildPoC = (id: string): void => {
    setTimeout(() => {
      const contentPane = document.getElementById(id);

      if (contentPane) {
        //  alert(contentPane)
        const focusableElements = contentPane.querySelectorAll(this.focusableList),
          firstFocusable = <HTMLElement>focusableElements[0];

        window.setTimeout(function () {
          // Kick this to the back of the line with the 'ol 0 timeout trick.
          firstFocusable ? firstFocusable.focus() : this.notifyOfFailure();
        }, 0);
      } else {
        this.notifyOfFailure();
      }

    }, 500)


  }

  private notifyOfFailure = (): void => {
    //  alert('NO FOCUS FOR YOU!');
  }

HTML：添加id="panel1"到包含按钮的 div 中。

<div class="modal-footer" id="panel1">
        <button type="button" class="btn btn-primary" (click)="confirmAction($event)">{{okText}}
        </button>
        <button type="button" class="btn btn-secondary" (click)="cancelAction($event)"
          [class.inActive]="!cancelText">{{cancelText}}
        </button>
      </div>