Question

我正在制作一个下周推出的单页应用程序，面向一个非常庞大的客户，并且为一个非常大的活动上线，好吧，在那之前还有很多工作要做。

有100多个“页面”都在一个700px x 600px的窗口中加载，我不久前就学会了你可以通过页面/部分进行选项卡，这反过来会破坏应用程序，因为它会带来焦点隐藏屏幕外元素，因此我禁用了整个应用程序的Tab键。

但现在有几个地方我们有一个带有少数输入字段的表单，当您填写表单时，您无法通过该表单进行选项卡。这是屁股的痛苦。

我需要创建它，以便您可以在表单字段中进行选项卡，但只能选择表单字段。我为表单设置了tabindex属性，并尝试启用输入选项卡，但是在没有使应用程序跳转到隐藏部分的情况下无法使其工作。

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

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

我试图这样做，哪个obv没有用lol

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

谢谢：）

Answer 1

我对@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/

Answer 2

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

否则，在您的密钥处理函数test event.target（或IE中的event.srcElement）中查看事件是否源自表单元素。您似乎正在使用jQuery，因此您可以将“allowTab”类分配给表单中的字段，然后执行此操作：

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

或者

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

Answer 3

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

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中删除那些隐藏的元素，但仍然使用methods found in this question跟踪它们。这样，您就不必在屏幕外元素之间来回循环。

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

3 个答案: