打开模态时如何阻止TAB键事件触发 [英] How to stop TAB key event from firing when a modal is open
本文介绍了打开模态时如何阻止TAB键事件触发的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
显示模态时,如何禁用TAB之类的按键事件?我在页面上的表单中有多个按钮和字段,可以通过选择来选择(突出显示).我想在显示模态时禁用它.该应用程序使用Angular,模态位于子组件中.
When the modal is showing, how can I disable key events like TAB? I have multiple buttons and fields in a form on the page that can be selected (focused) by tabbing. I want to disable that when the modal is showing. The application uses Angular and the modal is in a child component.
<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>
推荐答案
我建议这样-使用Renderer2并侦听keydown事件并通过keyCode过滤事件.然后在模式隐藏中删除该侦听器.
I'd suggest something like this - use Renderer2 and listen for a keydown event and filter events by keyCode. Then on modal hide remove that listener.
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键事件触发的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文