Question

Safari默认仅在使用Tab键进行导航时访问表单元素。使用自定义表单元素（例如jQuery UI Selectmenu）时，在表单字段中导航时会使用这些元素。如何使用Tab键在导航中包含自定义表单元素而不更改默认设置？

Answer 1

在 jQuery Selectmenu 之前有一个input元素，并为其添加一个事件处理程序，一旦它获得焦点，它就会将焦点设置为 jQuery Selectmenu 。然后使用此CSS隐藏您添加的输入框：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();
   }
});

编辑：为防止在 shift + tab 之后再次聚焦，您可以执行以下操作。

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

Answer 2

所以这就是我最终得到的解决方案：

select{
  display: block !important;
  left: -9999;
  position: absolute !important;
}

我设置顶部：-9999，当元素获得焦点时页面将滚动到顶部，所以我跳过了。我重用了selectmenu插件所应用的原始select元素。重要的语句用于覆盖插件应用的元素样式。

selectmenu插件会自动将焦点设置为a元素，因此当选择项目被聚焦时，不需要javascript就可以将焦点放在自定义下拉列表上。但是，这使得无法向后标注（使用shift），因为这会将焦点从自定义元素更改为原始元素，从而将焦点设置回自定义元素。

我解决了这个问题：

$('.ui-selectmenu').on('keydown', function(e){
  if(e.shiftKey && e.keyKode === 9){
    var all = $(':input'),
        el = $(this).parent().prev('select'),
        i = all.index(el);
    all.eq(i).focus();
});

这里我将所有输入存储在一个变量中，找到我的select元素，并将焦点设置为前一个元素。

如何在Safari中为自定义表单元素启用选项卡导航

2 个答案: