3

Задача такая реализация на angular должна быть в виде реализации контроллера или директивы:

<div>
    <input type="text" name="firstInput"/>
    <input type="text" name="secondInput"/>
    <button>Отправить</button>
</div>

есть div с полями input[type='text'] необходимо не выходя за пределы div пройтись по inputам, если оказавшись на последнем кликаем tab на клавиатуре, то переходим опять на первый input.

3
  • Сделать так можно, вопрос только зачем. Если другие элементы страницы не должны использоваться в этот момент, то их можно просто спрятать. Иначе они должны быть доступны по Tab. Подумайте о людях с ограниченными возможностями, например незрячих. Для них контролы не доступные по Tab становятся просто "невидимыми".
    – dzhioev
    21 сен 2015 в 12:43
  • Дело вот в чем - есть несколько однообразных div с полями. к примеру 10 div. Я беру к примеру один из этих div и задаю ему в angular свойство редактирования, тогда я хочу работать только с его полями. Поэтому и так задумано - обход только в рамках одного выбранного дива. Это реализация клавиатурного управления, так же управлять можно и мышкой, но там все работает и в порядке. 21 сен 2015 в 12:46
  • @dzhioev, например, модальный диалог - не должно быть возможности из него выйти при помощи tab, а нужно его закрыть, нажав ok или отмена. Т. е. при правильном применении всё хорошо.
    – Qwertiy
    21 сен 2015 в 14:46

2 ответа 2

0

Как вариант, найти все активные элементы (как минимум [tabindex], a[href], object, input, select, button), сохранить тамошнее значение и прописать -1. При закрытии диалога вернуть как было.

Другой вариант, обрабатывать из своего кода нажатие tab и переводить фокус на желаемый элемент. Сразу говорю, что надёжность этого способа под вопросом. И случай, требующий отдельной проверки - это мышкой щёлкнуть адресную строку браузера и там нажать tab - этот случай не попадёт под твой обработчик и вопрос уже чисто в том, на какой элемент страницы попадёт фокус первым.

0

Решение нашел такое: В div перебираем нужные элементы (input / select / a)

var elementTabindex = elementDiv[0].querySelectorAll('input[type="text"], select, a.button'); 

Далее проверяем если текущий tabindex больше или равно индексу последнего элемента, то выставляем фокус на первом элементы из имеющихся в этом div.

var currentIndex = document.activeElement.tabIndex || document.documentElement.tabIndex;

if(currentIndex  >= elementTabindex[elementTabindex.length-1].tabIndex){
  event.preventDefault();
  elementTabindex[0].focus();
}else if(currentIndex == -1 || currentIndex == 0){
 //для IE и FF
  event.preventDefault();
  elementTabindex[0].focus();}
2
  • А если нажать tab из адресной строки браузера?
    – Qwertiy
    22 сен 2015 в 8:13
  • То переходит на первый элемент. Используется ангулар, и модуль hotkeys (github.com/chieffancypants/angular-hotkeys) поэтому для конкретного дива задается $scope.editing = true; сочетанием клавиш , а это приводит к тому , что сам див становиться изолированным от других идентичных. 22 сен 2015 в 9:10

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.