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

How to disable tab key globally except for all forms in a page with JavaScript?

本文关键字：表单 JavaScript tab 何全局      更新时间：2023-09-26

我正在为一个相当大的客户制作一个单页应用程序，该应用程序将于下周推出，并将为一个非常大的活动上线，在那之前还有很多工作要完成。

有100多个"页面"都加载在一个700px x 600px的窗口中，不久前我就知道你可以在页面/部分之间进行制表，这反过来会破坏应用程序，因为它会将焦点转移到隐藏的屏幕外元素上，因此，我禁用了整个应用程序的制表键。

但现在有几个地方我们有一个表格，里面有一些输入字段，你在填写表格时无法通过这些字段

我需要制作它，这样你就可以在表单字段中进行制表，但只能在表单字段。我为表单设置了tabindex属性，并尝试启用inputs选项卡，但无法在不导致应用程序跳转到隐藏部分的情况下使其工作。

这是我需要更改的功能，这样它将禁用制表键，除了在表单中从输入到输入字段

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

我试着这样做，obv没有工作lol

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

感谢：）

我对@Joseph发布的内容进行了一些修复，以获得对此问题的答案，即能够通过表单的输入来切换+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/

您是否已尝试在所有不希望制表的元素上设置tabIndex="-1"？我认为这是一个更好的解决方案。

否则，在密钥处理程序函数中测试event.target（或IE中的event.srcElement），以查看事件是否源自表单元素。您似乎在使用jQuery，所以您可以将一个"allowTab"类仅分配给表单中的字段，然后执行以下操作：

$(document).keydown(function(e) {
   if (!$(e.target).hasClass("allowTab"))
      return false;
});

或

if (e.target.tagName !== "input")
// etc

我们要做的是确定下一行的输入并跳到它！：

http://jsfiddle.net/qXDvd/

$(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();
            }
        }
    });
});​

可能需要一些优化，但它是有效的。这最初是为了跳过非表单元素。如果愿意，可以添加不跳过的选择器。此外，您可以为Shift+Tab行为添加逻辑（可能在选项卡逻辑之前）

显然，它仍然会根据一些元素在源中的出现方式来遍历它们。然而，为什么不从DOM中删除那些隐藏的元素，但仍然使用本问题中找到的方法来跟踪它们呢。这样，您就不会有在屏幕外元素中来回循环的痛苦。

相关文章：