tabindex native javascript
Ребята, подскажите, пожалуйста, как мне решить следующую задачу:
У меня есть некий список элементов: ul.nav__list
li.nav__item
a.nav__item-link
span Players
li.nav__item
a.nav__item-link
span Coaches
li.nav__item
a.nav__item-link
span Refereed
div.navigation
a(href="#") Navigation
Мне необходимо реализовать следующий функционал. После загрузки документа, при нажатии на клавишу Tab, ссылки поочередно получают focus. Мне необходимо, чтобы порядок был слудующий. После фокуса на первой ссылке: a.nav__item-link при следующем нажатии на кноку Tab, у меня фокус перешел на: a(href="#") Navigation Затем на вторую ссылку: a.nav__item-link А после этого сноав на: a(href="#") Navigation Далее на третью ссылку a.nav__item-link И при следующем нажатии на Tab снова на: a(href="#") Navigation И так далее. И наиболее важный вопрос: как мне в момент фокуса ссылки, вызывать какой либо обработчик. Пример логики, которую я хочу реализовать есть на следующем сайте: http://www.kentfa.com/ |
<style>
ul li { display:inline;
border: 1px solid gray;
}
div a{ border: 1px solid gray; }
</style>
<ul class='nav__list'>
<li class = 'nav__item'>
<a href="#" class='nav__item-link'>
<span> Players </span>
</a>
</li>
<li class = 'nav__item'>
<a href="#" class='nav__item-link'>
<span> Coaches </span>
</a>
</li>
<li class = 'nav__item'>
<a href="#" class='nav__item-link'>
<span> Referees </span>
</a>
</li>
<div class='navigation'>
<a href="#"><span> Navigation</span> </a>
</div>
<script>
var flag = true, idx = 0;
var list = document.querySelectorAll('li a');
var nav = document.querySelector('div a');
nav.focus();
document.onkeydown = function(e) {
if(e.keyCode == 9) {
e.preventDefault();
if(flag) {
list[idx].focus();
// здесь можно вызвать обработчик
idx = (idx < list.length - 1)? idx + 1: 0;
}
else { nav.focus(); }
flag = !flag;
}
}
document.onkeyup = function(e) { if(e.keyCode == 9) e.preventDefault(); }
</script>
|
Спасибо. Но в данном случае мне не надо делать e.preventDefault();
А без этого функция работает не корректно. |
s24344,
Делайте e.preventDefault(); только для e.keyCode == 9 Внес изменения в пример пост 2 И обработчики можно вешать не на document.onkeydown, а на нужный вам блок, в котором лежат эти элементы - если надо, чтобы в других частях страницы TAB работал по-другому |
Спасибо.
|
Вы могли бы подсказать ответ ещё на один вопрос. А если использовать событие focus, а не привязываться к onkeydown. Каким образом мне сделать такую же очередность? Например с помощью атрибута tabindex.
|
Цитата:
Цитата:
|
Я уже реализовал задачу с помощью вашего решения, и всё работало отлично. Но teamlead сказал, что это не вариант и надо сделать с помощью tabindex. Сейчас это реализовываю, onFocusPrimaryLink(event) { console.log(event.target); } при событии focus и динамически меняю tabindex.
|
По фокусу c tabindex.
<style>
ul li { display:inline;
border: 1px solid gray;
}
div a{ border: 1px solid gray; }
:focus { background-color:lightgreen;}
</style>
<ul class='nav__list'>
<li class = 'nav__item'>
<a href="#" class='nav__item-link' tabindex="2">
<span> Players </span>
</a>
</li>
<li class = 'nav__item'>
<a href="#" class='nav__item-link' tabindex="4">
<span> Coaches </span>
</a>
</li>
<li class = 'nav__item'>
<a href="#" class='nav__item-link' tabindex="6">
<span> Referees </span>
</a>
</li>
</ul>
<div class='navigation'>
<a href="#" tabindex="1"><span> Navigation</span> </a>
</div>
<script>
var refs = document.querySelectorAll('a');
var list = document.querySelectorAll('li a');
var nav = document.querySelector('div a');
nav.focus();
[].forEach.call(refs, function(it) {
it.addEventListener('focus', function() {
var ti = +this.getAttribute('tabindex');
if(this == nav && (ti - 1)%list.length == 0) {
[].forEach.call(list, function(el) {
el.setAttribute('tabindex',(+el.getAttribute('tabindex') + list.length * 2).toString() );
});
}
ti = (ti + 1).toString();
if(this != nav) nav.setAttribute('tabindex',ti );
});
});
</script>
|
tab and focus
Цитата:
ниже иная вариация того, что предложил Dilettante_Pro, <!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<style>
ul li { display:inline;
border: 1px solid gray;
}
div a{ border: 1px solid gray; }
:focus {
background-color: #228B22;
}
</style>
<ul class='nav__list'>
<li class = 'nav__item'>
<a href="#" class='nav__item-link'>
<span> Players </span>
</a>
</li>
<li class = 'nav__item'>
<a href="#" class='nav__item-link'>
<span> Coaches </span>
</a>
</li>
<li class = 'nav__item'>
<a href="#" class='nav__item-link'>
<span> Referees </span>
</a>
</li>
</ul>
<div class='navigation' >
<a href="#"><span> Navigation</span> </a>
</div>
<script src="https://cdn.polyfill.io/v1/polyfill.js?Element.prototype.closest"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
var tabindex = document.querySelectorAll("[tabindex]");
var li = document.querySelectorAll(".nav__item");
var nav = document.querySelector(".navigation");
var idx = 0;
var ln = li.length;
[].forEach.call(tabindex, function(elem) {
elem.removeAttribute("tabindex")
});
[].forEach.call(li, function(elem, i) {
elem.setAttribute("tabindex", i);
elem.addEventListener("click", function() {
idx = i
})
});
li[0].focus();
nav.setAttribute("tabindex", ln);
document.addEventListener("keydown",
function(event) {
if (event.keyCode == 9 && event.target.closest(".nav__item")) {
event.preventDefault();
nav.focus()
} else if (event.keyCode == 9 && event.target.closest(".navigation")) {
event.preventDefault();
idx = ++idx % ln;
li[idx].focus()
}
}, true)
});
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 16:59. |