开发者

Tabbing through an HTML form on OS X, any way to force it to stop on all form elements?

First question here, be gentle. :)

In OS X, tabbing through an HTML form, you'll find that it only stops on text boxes and lists. I need it to stop on all form inputs (not strictly inputs, all form elements that collect data).

As far as I'm aware this can only be configured in System Prefe开发者_Python百科rences under Keyboard Shortcuts, but obviously we don't have control over that...

Anybody have any ideas? I'd hate to have write something in jQuery to solve something that seems so trivial.

Thanks!


From my previous question:

Stupid OSX Settings:

Tabbing through an HTML form on OS X, any way to force it to stop on all form elements?

You have to change this in System Preferences and there is no way to do it otherwise (to the best of my knowledge).

What you could try is to write a jQuery trigger for any input that has focus, see if the "Tab" key was hit, and if so jump to the next tabindex element.


I'd do something like this to force Safari to behave. The drawback is that you preventDefault on the normal navigator tabulation, which may be a bigger problem for accessibility in some situations. But I doubt it.

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();
});

It's a bit hacky, but it's quite better than telling your users to go change their Safari settings in System Prefs, lol.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜