Как включить навигацию по вкладкам для пользовательских элементов формы в Safari - PullRequest
Новая
       2

Как включить навигацию по вкладкам для пользовательских элементов формы в Safari

1 голос
/ 02 марта 2012

Safari по умолчанию посещает только элементы формы при использовании клавиши табуляции для навигации.При использовании пользовательских элементов формы, таких как jQuery UI Selectmenu , эти элементы игнорируются при навигации по полям формы.Как включить пользовательские элементы формы в навигацию с помощью клавиши табуляции, не меняя настройки по умолчанию?

Ответы [ 2 ]

1 голос
/ 02 марта 2012

Расположите элемент input прямо перед jQuery Selectmenu и добавьте к нему обработчик событий, чтобы, как только он получил фокус, он установил фокус на 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'));
});
0 голосов
/ 02 марта 2012

Итак, это решение, которое я выбрал: 

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

Если вы установите top: -9999, страница перейдет к вершине, когда элемент получит фокус, поэтому я пропустил это.Я повторно использую оригинальные элементы select, к которым применяется плагин 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();
});

Здесь я сохраняю все входные данные в переменной, нахожу свой элемент select и устанавливаю фокус на предыдущий элемент.

...