除了使用 JavaScript 的页面中的所有表单外，如何全局禁用 Tab 键？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9526909/
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
How to disable tab key globally except for all forms in a page with JavaScript?
提问by jaredwilli
I'm making a single page app that is launching next week, for a pretty huge client, and going live for a pretty big event and well, there's still a ton to finish before then.
我正在制作一个单页应用程序，该应用程序将于下周推出，面向一个非常庞大的客户，并为一个非常大的活动上线，而且在那之前还有很多工作要做。
There's 100+ 'pages' which are all loaded within a single 700px x 600px window, and I had learned not long ago you could tab through the page/sections, which in-turn would break the app because it would bring focus to hidden off-screen elements, so for this reason, I disabled the tab key for the entire app.
有 100 多个“页面”都加载在一个 700 像素 x 600 像素的窗口中，不久前我了解到您可以浏览页面/部分，这反过来会破坏应用程序，因为它会将焦点置于隐藏状态-screen 元素，因此出于这个原因，我禁用了整个应用程序的 Tab 键。
But now there are a couple places where we have a form with a handful of input fields which you are not able to tab through as you fill in the form. It's a pain in the ass.
但是现在有几个地方我们有一个表单，其中包含一些输入字段，您在填写表单时无法使用这些输入字段。这是一个痛苦的屁股。
I need to make it so you can tab through the form fields, but only the form fields. I have the tabindex attribute set for the form, and have tried to make inputs tab enabled but was not able to make it work without causing the app to jump to hidden sections.
我需要这样做，以便您可以浏览表单字段，但只能浏览表单字段。我为表单设置了 tabindex 属性，并尝试启用输入选项卡，但无法在不导致应用程序跳转到隐藏部分的情况下使其工作。
Here's the function I need to change so it will disable tab key except from input to input fields in a form.
这是我需要更改的功能，因此它将禁用制表键，除了从表单中的输入到输入字段。
window.onkeydown = function(e) {
if (e.keyCode === tab) {
return false;
}
}
I tried to do this, which obv didnt work lol
我试图这样做，这显然不起作用，哈哈
$('input').keydown(function(e) {
if (e.keyCode === tab) {
return true;
}
});
Thanks :)
谢谢 ：）
回答by jaredwilli
I made some fixes to what @Joseph posted for an answer to this that handle being able to shift + tab through inputs of a form so you can reverse direction. It was a very annoying thing for me before when I first had to find a way to do this, and didn't have time to waste anymore trying to find a complete solution for this until now. Here it is.
我对@Joseph 发布的内容进行了一些修复，以解决此问题的答案，即处理能够通过表单输入进行 shift + tab 以便您可以反转方向。在我第一次必须找到一种方法来做到这一点之前，这对我来说是一件非常烦人的事情，直到现在我都没有时间再浪费时间试图为此找到一个完整的解决方案。这里是。
$(function() {
// gather all inputs of selected types
var inputs = $('input, textarea, select, button'), inputTo;
// bind on keydown
inputs.on('keydown', function(e) {
// if we pressed the tab
if (e.keyCode == 9 || e.which == 9) {
// prevent default tab action
e.preventDefault();
if (e.shiftKey) {
// get previous input based on the current input
inputTo = inputs.get(inputs.index(this) - 1);
} else {
// get next input based on the current input
inputTo = inputs.get(inputs.index(this) + 1);
}
// move focus to inputTo, otherwise focus first input
if (inputTo) {
inputTo.focus();
} else {
inputs[0].focus();
}
}
});
});
Demo of it working http://jsfiddle.net/jaredwilli/JdJPs/
回答by nnnnnn
Have you tried setting tabIndex="-1"on all elements that you don't want to be able to tab to? I think that's a much better solution.
您是否尝试过tabIndex="-1"对所有不想使用 Tab 键的元素进行设置？我认为这是一个更好的解决方案。
Otherwise, within your key handler function test event.target(or event.srcElementin IE) to see if the event originated with a form element. You seem to be using jQuery, so you could assign an "allowTab" class just to the fields in your form and then do this:
否则，在您的键处理函数测试中event.target（或event.srcElement在 IE 中）查看事件是否源自表单元素。您似乎在使用 jQuery，因此您可以为表单中的字段分配一个“allowTab”类，然后执行以下操作：
$(document).keydown(function(e) {
if (!$(e.target).hasClass("allowTab"))
return false;
});
Or
或者
if (e.target.tagName !== "input")
// etc
回答by Joseph
what we do is to determine what input is next in line and skip to it!:
我们要做的是确定下一行是什么输入并跳到它！：
$(document).ready(function() {
//gather all inputs of selected types
var inputs = $('input, textarea, select, button');
//bind on keydown
inputs.on('keydown', function(e) {
//if we pressed the tab
if (e.keyCode == 9 || e.which == 9) {
//prevent default tab action
e.preventDefault();
//get next input based on the current input we left off
var nextInput = inputs.get(inputs.index(this) + 1);
//if we have a next input, go to it. or go back
if (nextInput) {
nextInput.focus();
}
else{
inputs[0].focus();
}
}
});
});?
may need some optimization but it works. this was originally meant to skip non-form elements. you can add selectors not to skip if you like. additionally, you can add logic for the Shift+Tabbehavior (maybe before the tab logic)
可能需要一些优化，但它有效。这最初是为了跳过非表单元素。如果你愿意，你可以添加选择器不要跳过。此外，您可以为Shift+Tab行为添加逻辑（可能在选项卡逻辑之前）
obviously, it will still go through some elements according to how they appear in the source. however, why not just remove those hidden elements from the DOM but still keep track of them using the methods found in this question. that way, you won't have the pain of having to cycle back and forth through off-screen elements.
显然，它仍然会根据它们在源中的出现方式来遍历一些元素。然而，为什么不只是从 DOM 中删除那些隐藏的元素，而是仍然使用在这个问题中找到的方法来跟踪它们。这样，您就不会因为必须在屏幕外元素之间来回循环而感到痛苦。
