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

Question

我正在制作一个下周发布的单页应用程序,对于一个非常庞大的客户来说,并为一个非常大的活动上线,好吧,在那之前还有很多东西要完成.

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

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

我需要创建它,以便您可以在表单字段中进行选项卡,但只能选择表单字段.我已经为表单设置了tabindex属性,并尝试启用输入选项卡但是无法使其工作而不会导致应用程序跳转到隐藏的部分.

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

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

我试图这样做,哪个obv没有工作大声笑

$('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/