javascript 将 tabindex 焦点限制在页面的某个部分
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5206813/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Restrict tabindex focusing to a section of the page
提问by SlappyTheFish
Situation:
情况：
I have a webpage which opens modal windows (light boxes) which contain forms where the user can input data. Users generally navigate using the keyboard, tabbing from one field to the next.
我有一个网页，它打开模式窗口（灯箱），其中包含用户可以输入数据的表单。用户通常使用键盘导航，从一个字段跳到下一个字段。
Problem:
问题：
When a modal window opens, only the window is active, the rest of the page is not accessible using the mouse, but elements can be reached by tabbing out of the modal window.
当模态窗口打开时，只有该窗口处于活动状态，无法使用鼠标访问页面的其余部分，但可以通过跳出模态窗口来访问元素。
Question:
问题：
How can I restrict movement by using the tab button to only the elements within the form window?
如何通过使用选项卡按钮仅限制表单窗口中的元素的移动？
The only thing I can think of is using Javascript to set tabindex=-1on all form elements (and other focusable elements) when the modal window is opened and then set the tabindexvalues back to their previous values when the modal window is closed.
Is there a simpler/better way?
我唯一能想到的就是tabindex=-1在模式窗口打开时使用 Javascript 设置所有表单元素（和其他可聚焦元素），然后tabindex在模式窗口关闭时将值设置回以前的值。有没有更简单/更好的方法？
回答by halfbit
How about catching the tab-key? On the last element and then put the focus on the first and vice versa with shift-tab
怎么抓tab-key？在最后一个元素上，然后将焦点放在第一个元素上，反之亦然shift-tab
This I am using in a multi-modless-diaolog environment, to keep the focus with in a Dialog, switching between dialogs with mouse or other key
这是我在多模式无对话环境中使用的，以将焦点保持在对话框中，使用鼠标或其他键在对话框之间切换
inputs=".editing, input, textarea, button, a, select"
no_tab="[type='hidden'], :disabled"
$focusable=dlg.$form.find(inputs).not(no_tab)
$fa_first=$focusable.first()
$fa_last=$focusable.last()
$fa_last.on("keydown", (evt) =>
if evt.keyCode==9 && ! evt.shiftKey
$fa_first.focus()
evt.preventDefault()
false
)
$fa_first.on("keydown", (evt) =>
if evt.keyCode==9 && evt.shiftKey
$fa_last.focus()
evt.preventDefault()
false
)
small edit: replaced my on "unibind()" (=.off(x).on(x)) function through jQuery "on()"
小编辑：通过jQuery“on()”替换了我的“unibind()”(=.off(x).on(x))函数
回答by CevenNome
in case you want to restrict the focus inside dom "parent"
如果您想限制 dom“父”内的焦点
parent.addEventListener('focusout', function(event) {
event.stopPropagation();
if (node.contains(event.relatedTarget)) { // if focus moved to another
parent descend
return;
}
parent.focus(); // otherwise focus on parent or change to another dom
})
supported by all mordern browsers
所有现代浏览器都支持
回答by Joel Purra
Have a look at the jQuery BlockUI Plugin. They have an example using a modal box with two buttons, and it restricts tabbing as well.
看看jQuery BlockUI 插件。他们有一个使用带有两个按钮的模式框的示例，它也限制了选项卡。
It may or may not work out-of-the-box with your modal windows, but it's worth a look instead of having to implement your own work-around.
它可能会或可能不会与您的模态窗口开箱即用，但值得一看，而不必实施您自己的解决方法。
回答by supercoco
Even though it is an old post I was looking for a solution to this problem and did the following to solve it.
尽管这是一篇旧帖子，但我一直在寻找解决此问题的方法并执行以下操作来解决它。
Using JQuery I disabled all input fields in different forms and divs as soon as the modal window opens up (except the ones on the modal form itself).
使用 JQuery，我在模式窗口打开后立即禁用了不同表单和 div 中的所有输入字段（除了模式表单本身的输入字段）。
$('#formId :input').prop('disabled',true);
$('#formId :input').prop('disabled',true);
when the modal form is closed, you can enable the input elements again.
当模态表单关闭时，您可以再次启用输入元素。
Disabled fields are not considered when "tabbing" around your page.
在您的页面上“切换”时不考虑禁用的字段。
