将tabindex焦点限制在页面的某一部分
将tabindex焦点限制在页面的某一部分
提问于 2011-03-06 05:14:09
情况：
我有一个网页，打开模式窗口(灯箱)，其中包含表单，用户可以输入数据。用户通常使用键盘导航，按to键从一个字段切换到下一个字段。
问题：
当模式窗口打开时，只有该窗口处于活动状态，无法使用鼠标访问页面的其余部分，但可以通过跳出模式窗口来访问元素。
问题：
如何使用制表符按钮将移动限制为只移动表单窗口中的元素？
我唯一能想到的就是在打开模式窗口时使用Javascript在所有表单元素(以及其他可聚焦元素)上设置tabindex=-1，然后在关闭模式窗口时将tabindex值设置回以前的值。有没有更简单/更好的方法？
回答 4
Stack Overflow用户
发布于 2016-06-01 21:16:05
抓紧tab-key怎么样？最后一个元素，然后使用shift-tab将焦点放在第一个元素上，反之亦然
这是我在一个多模式的无模式diaolog环境中使用的，用鼠标或其他键在对话框之间切换，以保持对话框的焦点
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
)小编辑:通过jQuery " on ()“替换了我的on "unibind()”(=.off(x).on(x))函数
Stack Overflow用户
发布于 2012-02-12 22:52:28
看一看jQuery BlockUI Plugin。他们有an example using a modal box with two buttons，它也限制了have键。
它可能会在你的模式窗口中开箱即用，也可能不会，但它值得一看，而不是必须实现你自己的变通方法。
Stack Overflow用户
发布于 2018-07-06 20:10:05
以防您想限制dom "parent“内的焦点。
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
})所有现代浏览器都支持
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5206813
复制相关文章
相似问题