如何在模式打开时停止触发 TAB 键事件

Question

当模式显示时，如何禁用 TAB 等按键事件？我在页面上的表单中有多个按钮和字段，可以通过 Tab 键选择（聚焦）。我想在模式显示时禁用它。该应用程序使用 Angular 并且模式位于子组件中。

<button tabindex="0">Button1</button>
<button tabindex="0">Button2</button>
<form>...</form>

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">...</div>
  </div>
</div>

Answer 1

您可以通过 preventDafault 键位上的 keyCode 9 (tab) 来禁用标签:

$(document).keydown(function(e) {
    if (e.keyCode == 9) {
        e.preventDefault();
    }
});

当然你会希望它出现在你的模态开启器上而不是原样，所以它不会永久禁用标签 ;)

Answer 2

您可以添加自己的事件侦听器：

// Your event listener
function preventTab(e) {
  e = e || window.event;
  if (e.keyCode === 9) { // If tab key is pressed
    e.preventDefault() // Stop event from its action
  }
}

// Call this when modal window opens
document.addEventListener(preventTab);

// Call this when modal window closes/unmounts
document.removeEventListener(preventTab);

Answer 3

试试这个代码，它只会在模式显示时禁用你的 Tab 键。

 $(document).keydown(function(e){
    if (e.which==9) // keycode for tab key
    {
        checkmodal = $('#myModal').is(':visible'); //check modal is opened or not
        if (checkmodal){
            e.preventDefault();
        }
    }
});

Answer 4

我建议这样 - 使用 Renderer2 并侦听 keydown 事件并按 keyCode 过滤事件。然后在模态隐藏中删除该侦听器。

onShow() {
   this.removeTabKeyListener = this.renderer.listen('document', 'keydown', (event) => {
      if (event.keyCode === 9) { 
        event.preventDefault();
      }
    });
}

onHide() {
  this.removeTabKeyListener();
}

一个小例子 - http://plnkr.co/edit/LdpmCpgapPbrA26fGO9U?p=preview

如何在模式打开时停止触发 TAB 键事件

How to stop TAB key event from firing when a modal is open

html

javascript

css

ngx-bootstrap

angular