Для хорошего пользовательского опыта, доступность и доступность веб -сайта/веб -приложения, а также функциональность имеют решающее значение.
Когда наш веб -сайт работает хорошо/опыт хорош, пользователи не знают об этом, но они определенно почувствуют это, когда у нас не будет хорошо. Важной частью доступности и доступности приложения является обработка входной фокусировки, но это еще один момент, который разработчики часто упускают из виду.
Пример плохой обработки ввода фокусировки: откройте окно после щелчка по ссылке, но не фокусирует курсор на любой элемент в окне. Еще хуже: сосредоточьтесь на элементе в модальном окне, но фокус не возвращается после закрытия. В идеале, ссылка сохраняется, когда ссылка запускается, а курсор сосредоточен на новом окне и перемещает курсор обратно, когда окно закрывается.
Но что, если вы не знаете, в каком элементе находится входной курсор?
JavaScript
Это прост в использовании document.activeElement, чтобы найти в данный момент выбранный элемент:
Кода -копия выглядит следующим образом:
var focusedElement = document.activeElement;
/* Например, пример:
var TriggerElement = document.activeElement;
mymodal = new MyModal ({
OnoPen: function () {
this.container.focus ();
},
onclose: function () {
triggerElement.focus ();
}
});
*/
Это свойство доступно не только для регулярных входных элементов, но также включает в себя поля форм или ссылки на теги <a>, но и любой элемент с набором атрибутов TabIndex доступен.
Причина, по которой мне нравится документ. Конечно, перед использованием таких функций вы должны провести много тестов - есть ли какие -либо ошибки в кросс -браузера или в условиях гонки. В общем, я очень доволен этим и нахожу это очень надежным!