如何在打开后立即使标签焦点集中在弹出窗口上，而不是将焦点集中在先前选择的值上 [英] How to bring tab focus on popup as soon as it opens rather than keeping focus on previously selected value

问题描述

我已使用自定义弹出模式来接收来自用户的确认消息.在这里，我有一些基于聚焦的输入字段，如果必须从用户处获取任何验证/确认消息，则会打开弹出消息.当弹出窗口打开时，选项卡焦点将位于背景中已选择的值上，而不是弹出窗口中；如果我使用选项卡，它将转到背景中的下一个输入字段，而不是将焦点放在弹出窗口上. 我该如何处理这个问题? 在此，根据选项卡焦点到enter/space栏上的按钮，它会接收到该特定按钮的事件. 我已经使用指令来处理键盘中"ESC"上的按键.在这里，我想处理这些事情，但不知道如何使其工作. 1.在默认情况下，如果只有一个按钮，则选项卡焦点必须位于确定"按钮上；如果有两个按钮，则说确定"，取消"选项卡焦点必须位于确定"按钮上. 2.通过使用制表符/鼠标，我必须能够在按钮之间进行切换. 需要帮助.

I have used a custom popup modal for confirmation messages from user. Here I have some input fields based on focus out, if any validation/confirmation message has to be taken from the user, the popup message opens. When the popup opens, the tab focus will be on already selected value in background and not on the popup, and if I use tab, it goes to the next input field in the background rather than giving focus on the popup. How can I handle this issue? Here based on tab focus to buttons on enter/space bar it takes the event of that particular button. I have used a directive to handle for keypress on 'ESC' in the keyboard. Here I want to work on these things but no idea how to make it work. 1. Here by default if there is only one button, then the tab focus must be on "Ok" button if there are 2 buttons say "ok" and "Cancel" the tab focus to be on the "okay" button. 2. by using tab/mouse I must be able to switch between the buttons. Help needed.

演示: 演示

为了获取弹出窗口，我使用了服务文件:

For getting popup i have used service file:

service.ts:

service.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()">

Ts:

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

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

Based on this blurout I am calling that service and showing the popup. As soon as popup opens I want tab focus to be on that popup irrespective of what popup lies on the background screen. but key functions should be only for popup when it is present, when the popup is closed, again control to be back on the specific field on the background and function accordingly.

推荐答案

我能够通过在弹出组件文件中添加一个函数并在弹出窗口打开时调用该函数来使这项工作有效.

I was able to make this work by adding a function to the popup component file and calling the same to when the popup has opened.

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: 在包含按钮的div中添加了id="panel1".

HTML: Added id="panel1" to the div which contains the buttons.

<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>

这篇关于如何在打开后立即使标签焦点集中在弹出窗口上，而不是将焦点集中在先前选择的值上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！