如何在Safari中启用自定义表单元素的标签导航

当使用Tab键导航时，Safari默认只访问表单元素。在使用自定义表单元素（例如jQuery UI Selectmenu）时，浏览表单字段时这些元素不会被忽略。如何在不改变默认设置的情况下使用Tab键在导航中包含自定义表单元素？如何在Safari中启用自定义表单元素的标签导航

来源

2012-03-02 Jørgen

有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')); 
});

来源

2012-03-02 08:06:57 blackpla9ue

我喜欢它:)但是，由于selectmenu之前的元素是select元素，它会将焦点反弹回selectmennu，所以它会打断shift-tabbing。我正在研究解决方案。 – 2012-03-02 09:21:06

@Jørgen你现在可以检查。我已经用解决方案编辑了这篇文章。 – blackpla9ue 2012-03-02 10:21:55

谢谢，我对这个解决方案并没有很满意，但是你让我走了，所以我接受:) – 2012-03-02 12:26:34

所以这是我结束了解决方案：

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

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

selectmenu插件会自动将焦点设置到a元素，以便在焦点选择项目时将焦点放在自定义下拉菜单上不需要javascript。但是，这使得向后缩进（带有移位）成为不可能，因为这会将焦点从自定义元素更改为原始元素，该元素将焦点设置回自定义元素。

我解决这个问题是这样的：

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

在这里，我所有的输入存储在一个变量，发现我的选择元素，并将焦点设置到前一个元素。

来源

2012-03-02 13:19:51

如何在Safari中启用自定义表单元素的标签导航

回答

相关问题