browser - 防止选项卡在地址栏中循环

Question

我意识到这可能是一个可访问性问题，最好不要理会，但我想弄清楚是否有可能阻止选项卡在选项卡循环中访问地址栏。

我的应用程序有另一种循环输入区域的方法，但许多新用户本能地尝试使用该选项卡，但并没有按预期工作。

Answer 1

这是一个通用的 jquery 实现，您不必在其中找到最大选项卡索引。请注意，如果您在 DOM 中添加或删除元素，此代码也将起作用。

$('body').on('keydown', function (e) {
    var jqTarget = $(e.target);
    if (e.keyCode == 9) {

        var jqVisibleInputs = $(':input:visible');
        var jqFirst = jqVisibleInputs.first();
        var jqLast = jqVisibleInputs.last();

        if (!e.shiftKey && jqTarget.is(jqLast)) {
            e.preventDefault();
            jqFirst.focus();
        } else if (e.shiftKey && jqTarget.is(jqFirst)) {
            e.preventDefault();
            jqLast.focus();
        }
    }
});

但是，您应该注意上面的代码仅适用于可见输入。一些元素即使没有输入也可能成为文档的 activeElement 所以如果是你的情况，你应该考虑将它们添加到 $(':input:visible')选择器。

我没有添加代码来滚动到焦点元素，因为这可能不是每个人都想要的行为......如果你需要它，只需在调用 focus() 之后添加它。