Question

我创建了一个库，用于向用户显示使用JavaScript的不同对话框。该库生成类似于以下内容的代码：

<div id="dialog-overlay">
    <!-- focus must be allowed to elements within this DIV only -->
    <div class="dialog">
        <input ... />
        ...
        <button type="button">OK</button>
    </div>
</div>

我遇到的问题是，当我使用TAB键在元素之间切换时，它还会将焦点设置为模态对话框之外的元素。

解决此问题并将焦点限制在模态对话框中的元素的最佳方法是什么？

Answer 1

将焦点仅限于你的模态将是一个问题，你可以做的是在对话框的第一个元素上设置focus，就像预期的行为一样，然后在你的最后一个元素上添加一个事件监听器在keyup / keydown，它应该重点关注第一个元素。否则将非常麻烦地禁用背景元素上的focus / tabindex

<强>更新

检查按下的标签键：

function tabPressHandler(event) {
    if (event.keyCode == 9) {
      $('.modelFirstElement').focus();
      event.preventDefault();
      event.stopPropagation();
    }

将焦点限制在模态对话框中的元素

1 个答案: