Safari忽略tabindex

Question

我在文本框旁边有2个按钮,在2个按钮后面有另一个文本框.第一个文本框的tabindex为1000,第一个按钮为1001,第二个按钮为1002.第二个文本框的tabindex为1003.

当我按Tab键时,tabindex在除Safari之外的所有浏览器中都能正常工作,尽管tabindex已正确设置,但它可以立即从第一个文本框移动到第二个文本框.有关如何预防此问题的任何想法？

Answer 1

默认情况下,在safari(!)中禁用tab-access.要启用它,请选中"首选项>高级>按选项卡以突出显示页面上的每个项目".

Answer 2

iOS 的解决方案是按住 Option Key + Tab 键。

Answer 3

使Safari和Mac可访问:

在Mac上进行测试:系统首选项 - >键盘 - >快捷方式(选项卡) - >全键盘访问 - >所有控件

要使用Tab键在Safari上工作:首选项 - >高级 - >按Tab键突出显示页面上的每个项目(选中此项)

Answer 4

我尝试使用Safari 5.1.5进行以下操作.我不知道它如何与旧版本一起使用:

当"突出显示页面上的每个项目"(请参阅​​icondivine的回答)被禁用时,您可以通过按Option(alt)+选项卡来使用该功能.

如果不这样做(并且该选项被禁用),Safari将默认选项卡通过所有表单字段(如input,textarea,select ...).对于此字段,它还将接受/考虑tabindex.它将首先使用tabindex(按给定索引的顺序)选中所有表单元素,然后按照HTML中定义的顺序浏览其余表单元素.

因此,如果为两个输入元素定义tabindex ="1"(或1001)和"3"(或1003),Safari将首先关注此字段,然后关注其他字段.

Answer 5

如果你正在编写自己的网页,我会修补一些jquery/javascript.这就是我用过的.

缺点是您要阻止页面上的默认Tab键行为,这在某些情况下可能是更大的可访问性问题.但我对此表示怀疑.

var Tab = {};
Tab.i = 1,
Tab.items = 0;

function fixTabulation () {
    /* This can be used to auto-assign tab-indexes, or
    #  commented out if it manual tab-indexes have
    #  already been assigned.
    */
    $('input, select, textarea').each(function(){
        $(this).attr('tabindex', Tab.i);
        Tab.i++;
        Tab.items++;
    });

    Tab.i = 0;

    /* We need to listen for any forward or backward Tab
    #  key event tell the page where to focus next.
    */
    $(document).on({
        'keydown' : function(e) {
            if (navigator.appVersion.match("Safari")) {
                if (e.keyCode == 9 && !e.shiftKey) { //Tab key pressed
                    e.preventDefault();
                    Tab.i != Tab.items ? Tab.i++ : Tab.i = 1;
                    $('input[tabindex="' + Tab.i + '"], select[tabindex="' + Tab.i + '"], textarea[tabindex="' + Tab.i + '"]').not('input[type="hidden"]').focus();
                }
                if (e.shiftKey && e.keyCode == 9) { //Tab key pressed
                    e.preventDefault();
                    Tab.i != 1 ? Tab.i-- : Tab.i = Tab.items;
                    $('input[tabindex="' + Tab.i + '"], select[tabindex="' + Tab.i + '"], textarea[tabindex="' + Tab.i + '"]').not('input[type="hidden"]').focus();
                }
            }
        }
    });

    /* We need to update Tab.i if someone clicks into
    #  a different part of the form.  This allows us
    #  to keep tabbing from the newly clicked input
    */
    $('input[tabindex], select[tabindex], textarea[tabindex]').not('input[type="hidden"]').focus(function(e) {
        Tab.i = $(this).attr('tabindex');
        console.log(Tab.i);
    });
}

$(document).ready(function() {
    fixTabulation();
});

这不是完美的解决方案,但它比告诉所有用户在System Prefs中更改其Safari设置要好得多,哈哈.