Иногда возникает ситуация, когда необходимо определить, какой элемент в документе в данный момент имеет фокус. Например, при создании интерактивного интерфейса, где необходимо управление с помощью клавиатуры.
Рассмотрим ситуацию: есть таблица, состоящая из элементов input. Хотелось бы реализовать навигацию по ней с помощью стрелок на клавиатуре. По умолчанию, клавиша Tab позволяет перемещаться между активными элементами страницы, но стрелки и клавиша Enter такой функции не имеют.
При создании функционала для обработки клавишных событий важно знать, на каком элементе сейчас находится фокус. Для этого в JavaScript есть возможность использовать свойство document.activeElement.
var focusedElement = document.activeElement;
В переменной focusedElement теперь содержится ссылка на элемент, который в данный момент имеет фокус. Если ни один элемент не имеет фокуса, то document.activeElement будет равен body.
Как только известно, какой элемент имеет фокус, можно начать работу с ним, например, перемещать фокус на следующий или предыдущий элемент в зависимости от нажатой клавиши.
// предположим, что у каждого input есть id в формате "input-1", "input-2" и т.д.
var currentId = parseInt(focusedElement.id.split('-')[1]);
if (event.keyCode == 'ArrowRight') {
var nextId = currentId + 1;
var nextElement = document.getElementById('input-' + nextId);
if (nextElement) nextElement.focus();
}
Таким образом, используя document.activeElement, можно узнать, какой элемент имеет фокус, и управлять этим фокусом в зависимости от пользовательского ввода.
Добавить комментарий