javascript - 如何全局禁用 tab 键，除了使用 JavaScript 的页面中的所有表单？

Question

我正在制作一个将于下周发布的单页应用程序，面向一个非常大的客户，并为一个非常大的事件上线，嗯，在那之前还有很多工作要做。

有 100 多个“页面”全部加载到一个 700 像素 x 600 像素的窗口中，不久前我了解到您可以通过 tab 键浏览页面/部分，这反过来会破坏应用程序，因为它会带来焦点隐藏屏幕外的元素，因此，出于这个原因，我禁用了整个应用程序的 Tab 键。

但是现在有几个地方我们有一个表单，其中包含一些输入字段，您在填写表单时无法通过这些字段切换。这很让人头疼。

我需要制作它以便您可以在表单域中切换，但只能在表单域中切换。我为表单设置了 tabindex 属性，并尝试启用输入选项卡，但无法在不导致应用程序跳转到隐藏部分的情况下使其工作。

这是我需要更改的功能，因此它会禁用制表键，除了从表单中的输入到输入字段。

window.onkeydown = function(e) {
    if (e.keyCode === tab) {
        return false;
    }
}

我试过这样做，但没有成功，哈哈

$('input').keydown(function(e) {
    if (e.keyCode === tab) {
        return true;
    }
});

谢谢:)

Answer 1

我对@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();
            }
        }
    });
});

它的演示 http://jsfiddle.net/jaredwilli/JdJPs/