Question

因此，出于可访问性目的，我尝试捕获选项卡式focus和blur事件，以捕获模式中的Tab键顺序。

出于某种原因，我遇到了一些奇怪的浏览器行为。

在我的组件中，我有以下代码：

// On Init
ngOnInit (){

    // Get all of the buttons and anchors in the modal
    var buttons = this.modal.nativeElement.querySelectorAll("button, a");

    // Get the number of buttons
    var numButtons = buttons.length;

    // Get the last button
    var lastButton = buttons[numButtons - 1];

    // When the last button loses focus
    lastButton.addEventListener("blur", (e: any) => {

        // Prevent Default
        e.preventDefault();

        // Focus on the modals close button
        this.focusCloseButton();
    })
}

技术上这完美无缺。如果我在调用this.focusCloseButton后注销活动元素，我的确会得到关闭按钮的引用。

但是，标签实际上会移动到浏览器本身，无论第一个元素是什么。对于Chrome，这是网址栏左侧的“查看网站信息”按钮。在Firefox中，这是选项卡列表中的第一个选项卡。

如何正确捕获此内容，以便浏览器不会劫持标签页？

Answer 1

显然blur事件发生得太晚，无法在浏览器接管之前捕获。

相反，我使用键绑定来检测按Tab键的时间并从那里进行捕获。

// The OnInit function handles capturing tab order
ngOnInit (){

    // All of the buttons and links in the modal
    var buttons = this.modal.nativeElement.querySelectorAll("button, a");

    // The first button or link in the modal
    var firstButton = buttons[0];

    // The last button or link in the modal
    var lastButton = buttons[buttons.length - 1];

    // Listen for keydown events on the modal
    this.modal.nativeElement.addEventListener("keydown", (e: any)=> {

        // If the key pressed was the tab button
        if ( e.keyCode === 9 && !e.shiftKey ) {

            // If the currently active element is the last button
            if (document.activeElement == lastButton){

                // Prevent default action
                e.preventDefault();

                // Put focus on the close button
                this.focusCloseButton();
            }
        } else if ( e.keyCode === 9 && e.shiftKey === true ){

            // If the key pressed was shift+tab
            // And the currently active button is the close button
            if ( document.activeElement == firstButton ){

                // Prevent Default
                e.preventDefault();

                // Focus the last button
                lastButton.focus();
            }
        }
    })
}

对于那些想知道this.focusCloseButton做什么的人：

// Puts focus on the close button
focusCloseButton: Function = function(){
    this.closeButton.nativeElement.focus();
};

对closeButton的引用由ViewChild创建：

// Reference to the close button
@ViewChild("closeButton") closeButton: ElementRef;

与标记元素绑定在dom中：

<button #closeButton></button>

正确捕捉标签焦点/模糊

1 个答案: