防止选项卡在地址栏中循环显示 [英] Preventing tab to cycle through address bar

问题描述

我意识到这可能是一个可访问性问题，最好不要理会，但是我想弄清楚是否有可能防止制表符在制表周期中访问地址栏。

I realize this is probably an accessibility issue that may best be left alone, but I'd like to figure out if it possible to prevent the tab from visiting the address bar in the tabbing cycle.

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

My application has another method of cycling through input areas, but many new users instinctively try to use the tab, and it doesn't work as expected.

推荐答案

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

Here's a generic jquery implementation where you don't have to find the max tab index. Note that this code will also work if you add or remove elements in your 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'）选择器中

However, you should note that the code above will work only with visible inputs. Some elements may become the document's activeElement even if they're not input so if it's your case, you should consider adding them to the $(':input:visible') selector.

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

I didn't add code to scroll to the focus element as this may not be the wanted behavior for everyone... if you need it, just add it after the call to focus()

这篇关于防止选项卡在地址栏中循环显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！