如何在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中啓用自定義表單元素的標籤導航

回答

相關問題