Question

Safari defaults to only visit form elements when using the tab key for navigation. When using custom form elements, such as the jQuery UI Selectmenu, these elements are igonered when navigating through the form fields. How can I include custom form elements in navigation using the tab key without changing the default setting?

Answer 1

Have an input element right before the jQuery Selectmenu, and add an event handler to it so once it gets focus, it sets focus to the jQuery Selectmenu. Then use this CSS to hide the input box you added: position: absolute; top: -9999px; left: -9999px;

$('input.hiddenInput').focus(function(){
   var cameFrom = $('#myForm').data('lastIn');

   //check whether it came from the jQuery select menu
   if(cameFrom != 'jquery-ui-element'){
       $('jquery-ui-element').focus();
   } else {
       //focus previous sibling
       var inp = $('input');
       var index = inp.index(this);
       var prev = inp[index-1];
       prev.focus();
   }
});

Edit: To prevent being focused again after shift + tab you can do something like this.

$('#myForm input').focusout(function () {
   $('#myForm').data('lastIn', $(this).attr('name'));
});