javascript - 将可聚焦控件限制在当前对话框中的最佳方法是什么？

Question

我有一个带有对话框的网络应用程序。对话框是附加到主体的简单 div 容器。整个页面还有一个覆盖层，以防止点击其他控件。但是:目前用户可以关注叠加层下的控件(例如输入)。有什么方法可以将可选项卡控件限制为对话框中的控件吗？

我正在使用 jQuery(但不使用 jQueryUI)。在 jQueryUi 对话框中它工作正常(但我不想使用 jQueryUI)。我没弄清楚，这是如何在那里完成的。

这是 jQueryUI 示例:http://jqueryui.com/resources/demos/dialog/modal-confirmation.html - 网页上的链接不可聚焦。焦点保留在对话框内(用户无法使用选项卡将焦点放在浏览器的 urlbar 上)。

HTML:

<a href="#test" onclick="alert('Oh no!');">I should not receive any focus</a>
<input type="text" value="No focus please" />
<div class="overlay">
    <div class="dialog">
        Here is my dialog<br />
        TAB out with Shift+Tab after focusing "focus #1"<br />
        <input type="text" value="focus #1" /><br />
        <input type="text" value="focus #1" /><br />
    </div>
</div>    

CSS:

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    text-align: center;
}

.dialog {
    display: inline-block;
    margin-top: 30%;
    padding: 10px;
    outline: 1px solid black;
    background-color: #cccccc;
    text-align: left;
}

这是我的 fiddle :http://jsfiddle.net/SuperNova3000/weY4L/

有人有想法吗？我再说一遍:我不想为此使用 jQueryUI。我想了解底层技术。

Answer 1

经过数小时的尝试，我找到了解决此问题的简单方法。我认为最好的方法是添加 2 个伪元素。一张在对话框之前和一张之后(在叠加层内)。我正在使用 -0x0 像素的标签。当到达第一个 时，我关注对话框中的最后一个控件。当关注最后一个 时，我关注的是对话框中的第一个控件。

我已经改编了这篇文章的答案:Is there a jQuery selector to get all elements that can get focus? - 找到第一个和最后一个可聚焦的控件。

HTML:

<div class="overlay">
    <a href="#" class="focusKeeper">
    <div class="dialog">
        Here is my dialog<br />
        TAB out with Shift+Tab after focusing "focus #1"<br />
        <input type="text" value="focus #1" /><br />
        <input type="text" value="focus #1" /><br />
    </div>
    <a href="#" class="focusKeeper">
</div>    

额外的 CSS:

.focusKeeper {
    width: 0;
    height: 0;
    overflow: hidden;
}

我的Javascript:

$.fn.getFocusableChilds = function() {
  return $(this)
    .find('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object:not([disabled]), embed, *[tabindex], *[contenteditable]')
    .filter(':visible');
};

[...]

$('.focusKeeper:first').on('focus', function(event) {
    event.preventDefault();
    $('.dialog').getFocusableChilds().filter(':last').focus();
});

$('.focusKeeper:last').on('focus', function(event) {
    event.preventDefault();
    $('.dialog').getFocusableChilds().filter(':first').focus();
});

可能我稍后会添加 fiddle ，暂时没有时间了。 :(

---

编辑:正如 KingKing 在下面指出的那样，当在控件外单击时，焦点会丢失。这可以通过为 .overlay 添加 mousedown 处理程序来解决:

$('.overlay').on('mousedown', function(event) {
    event.preventDefault();
    event.stopImmediatePropagation();
});

---

编辑 #2:还缺少另一件事:将焦点移到文档之外(例如标题栏)，而不是向后切换。所以我们需要另一个文档处理程序，它将焦点放回到第一个可聚焦元素上:

$(document).on('focus', function(event) {
    event.preventDefault();
    $('.dialog').getFocusableChilds().filter(':first').focus();
});