Javascript 禁用特定 div 上的 Tab 键
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5556420/
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
Disable tab key on a specific div
提问by nepomucenobr
I have the following structure:
我有以下结构：
<div id="wrapper">
<div id="div1">Some content</div>
<div id="div2">Some content</div>
</div>
I want to "disable" the tab key on div2, I mean the elements of div2 won't receive focus when the tab key is pressed.
我想“禁用”div2 上的tab 键，我的意思是当按下tab 键时div2 的元素不会获得焦点。
Is there any easy way to create this tab key blocker using javascript/jquery?
有没有什么简单的方法可以使用 javascript/jquery 创建这个 Tab 键拦截器？
回答by Jason
@John Strickler is right. The behaviour of the tab key can be changed with the tabindex attribute. It is the order the elements will have the focus.
@John Strickler 是对的。可以使用 tabindex 属性更改 tab 键的行为。这是元素具有焦点的顺序。
With <div id="div1" tabindex="-1">Some content</div>you should prevent the focus to be on your div.
有了<div id="div1" tabindex="-1">Some content</div>你应该避免将焦点放在你的股利。
More info here: http://www.htmlcodetutorial.com/forms/_INPUT_TABINDEX.html
更多信息在这里：http: //www.htmlcodetutorial.com/forms/_INPUT_TABINDEX.html
回答by David says reinstate Monica
There's a fairly simple way of doing this, using jQuery's focus()method. Given the following, simplified, html:
有一个相当简单的方法，使用 jQuery 的focus()方法。鉴于以下简化的 html：
<div id="first">
<label for="first">Can tab to this input</label>
<input type="text" id="first" />
</div>
<div id="second">
<label for="second">Can't tab to this input</label>
<input type="text" id="second" />
</div>
<div id="third">
<label for="third">Can tab to this input</label>
<input type="text" id="third" />
</div>
And the jQuery:
和 jQuery：
$('#second input').focus(
function(){
$('#third input:first').focus();
});
This is, slightly, over-simplified though. If you post your exact mark-up we might be able to offer something a little more...tailored?
不过，这有点过于简化了。如果您发布您的确切标记，我们可能会提供更多...量身定制的东西？
It also, in the above implementation, prevents the inputbeing focused via the click event, as well as the tab, which reduces the usefulness, I'd imagine.
在上面的实现中，它也阻止了input通过单击事件以及tab，这降低了实用性，我想。
Edited编辑以修改上述代码，以区分鼠标单击和键盘选项卡的焦点：
$('#second input').bind('keyup mouseup',
function(e){
if (e.which == 9) {
// focus from tab
$('#third input:visible:first').focus();
}
else if (e.which == 1) {
// focus from click
return false;
}
else {
alert('God only knows, what buttons are you mashing..?');
}
});
