Имитация нажатия клавиши табуляции с помощью JavaScript

Решение, к которому я пришел, состоит в том, чтобы создать div "похититель фокуса" (с tabindex = -1 - может иметь фокус, но не может быть изначально перенесен на вкладку) по обе стороны от области, в которой я хочу вручную управлять фокус. Затем я помещаю прослушиватель событий с пузырьками для фокусировки и размытия всей области. Когда какой-либо фокус находится в области, значения tabindex изменяются на -1, а когда происходит какое-либо размытие, они изменяются на 0. Это означает, что, сфокусировавшись на области, вы можете табуировать или сдвигать табуляцию из нее и правильно заканчиваются на других элементах страницы или элементах пользовательского интерфейса браузера, но как только вы фокусируетесь оттуда, похитители фокуса становятся доступными для вкладок, и в фокусе они правильно настраивают область вручную и перемещают фокус на элемент в конце, как если бы вы нажали на один или другой конец области вручную.

Это решение, которое я использовал в нашем веб-приложении для двух настраиваемых элементов управления, всплывающего календаря и всплывающего селектора веса единицы/значения (при нажатии на текстовое поле появляется div с двумя вариантами выбора)

function tab_focus(elem)
  var fields = elem.form.getElements()
  for(var i=0;i<fields.length;i++) {
    if(fields[i].id == elem.id){
      for(i=i+1;i<fields.length;i++){
        if(fields[i].type != 'hidden'){
          fields[i].focus()
          return    
        }
      }
      break;
    }
  }
  elem.form.focusFirstElement();
}

Это использует структуру Prototype и ожидает расширенный элемент (т.е. $('thing_id')) в качестве параметра.

Он получает форму, которой принадлежит элемент, и перебирает элементы формы, пока не найдет себя.

Затем он ищет первый нескрытый элемент после него и передает ему фокус.

Если после него в форме нет элементов, он перемещает фокус обратно на первый элемент в форме. Вместо этого я мог бы найти следующую форму на странице через document.forms, но большинство наших страниц используют одну форму.

На самом деле, я думаю, есть способ, даже если это крупный PITA. Я могу убедиться, что каждый элемент, даже если он, естественно, табуляция, имеет Xtabindex, каким-то образом в правильном порядке, даже если я буду добавлять виджеты других людей и, таким образом, использовать jQuery для добавления их постфактум, а не возможность указать его прямо в HTML или другом начальном коде построения. Тогда вся моя форма будет иметь настоящий tabindex. Пока у него есть фокус, он будет поглощать нажатия клавиш, и, если они табуляции или Shift+Tab, перемещать поддельный фокус на основе Xtabindex. Если табуляция нажата на последнем (или shift+tab на первом) элементе в форме, она не будет поглощать нажатие клавиши, что позволит браузеру правильно сфокусироваться на другой странице или элементах пользовательского интерфейса браузера за пределами формы с помощью клавиатуры.

Я могу только догадываться, к каким непреднамеренным побочным эффектам приведет этот подход.

На самом деле, это даже не решение, потому что я все еще не могу с его помощью подделать вкладку на последнем элементе.

Я создал простой подключаемый модуль jQuery, который решает эту проблему. Он использует селектор «: tabbable» пользовательского интерфейса jQuery, чтобы найти следующий элемент «tabbable» и выбрать его.

Пример использования:

// Simulate tab key when element is clicked 
$('.myElement').bind('click', function(event){
    $.tabNext();
    return false;
});

Я думаю, что эти ошибки из-за автозаполнения. Возможно, вы сможете отключить их, установив перед отправкой события атрибут автозаполнения на «выключено».

setAttribute('autocomplete','off')