Question

我有一个弹出对话框（具有高z-index的div），其中包含一些输入元素。当这个对话框打开时，我希望tab和shift-tab只在这个对话框中的元素之间循环。我怎么能做到这一点？

Answer 1

您可以使用tabIndex属性并将其设置为-1，以表示您不想在选项卡中循环的所有元素。

<input type="text" id="no-tab-cycle" tabIndex="-1"/>

当然，您需要通过一些带有jQuery的智能选择器来管理这种行为，但这取决于您的表单有多复杂......

也许其他人有更好的答案..

使用示例进行更新

使用jQuery，并假设您的弹出窗口的ID为 my-popup-dialog ，此代码应该可以解决问题，根据需要更改选择器

$('input, textarea, select').each(function(index) {
    $(this).attr('tabIndex', '-1');
});

$('#my-popup-dialog input, #my-popup-dialog textarea, #my-popup-dialog select').each(function(index) {
    $(this).removeAttr('tabIndex');
});

Answer 2

没有直接的方法可以做到这一点，但这是一种（有点混乱）的方式。您基本上需要跟踪当前具有焦点的元素：

处理页面上所有控件的onfocus事件（您可以自动设置）并在处理程序中记下收到焦点的元素，让我们调用此currentFocus
同样处理onblur事件并记下刚失去焦点的元素，让我们称之为previousFocus。
现在为执行所需操作的onfocus处理程序添加额外的逻辑：如果previousFocus是对话框中的最后一个控件，currentFocus是对话框外的控件，将焦点设置到对话框中的第一个控件 - 这将处理最后一个控件的标签。反转此逻辑以处理第一个控件中的shift-tabbing。

Javascript：陷阱焦点在对话框中

2 个答案: