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 input
s, 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:
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.
精彩评论