Safariでカスタムフォーム要素のタブナビゲーションを有効にするには

Question

Safariでは、ナビゲーションにタブキーを使用する場合にのみ、フォーム要素にアクセスするようにデフォルト設定されています。 jQuery UI Selectmenuのようなカスタムフォーム要素を使用する場合、これらの要素はフォームフィールドをナビゲートする際に認識されます。デフォルトの設定を変更せずにタブキーを使用してナビゲーションにカスタムフォーム要素を含めるにはどうすればよいですか？

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

編集：あなたはこのような何かを行うことができシフト+タブ後に再び焦点を当てされるのを防ぐために。

$('#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は必要ありません。ただし、これにより、カスタム要素からカスタム要素にフォーカスを戻す元の要素にフォーカスが変更されるため、後方にタブを移動することはできません（シフトあり）。

私はこのように、この問題を解決：ここ

$('.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要素を見つけて、前の要素にフォーカスを設定します。