0
241
ViewsTraverse through div elements using tab index
So, I'm creating a Memory Game and I want to be able to select and flip the different cards using the keyboard. Right now I'm using tab index on the cards (which are DIV elements), but the problem is that when traversing over the cards using TAB I'm not selecting the cards in the correct order, rather it's jumping around when selecting. I have tried setting the tab index value to different values, such as the first card having the lowest value and the last card having the highest value.
So, my question is: How can I traverse the cards with the tab key in the correct order?
Note, I'm only using vanilla javascript.
·
Juan Pablo Isaza
1 answers
Answer question0
Next time, try to provide a minimal reproducable example.
Here's one: sort the elements on their tabindex property value:
document.querySelector(`[tabindex="1"]`).focus();
const sortedDivsOnTabIndex = [...document.querySelectorAll(`[tabindex]`)]
.sort((divA, divB) =>
+divA.getAttribute(`tabindex`) - +divB.getAttribute(`tabindex`));
// result
document.querySelector(`pre`).textContent = sortedDivsOnTabIndex
.map(div =>
`tabindex ${div.getAttribute(`tabindex`)}, content "${div.textContent}"`)
.join(`\n`);#tiContainer {
display: inline-block;
width: 12rem;
}
pre {
display: inline-block;
position: absolute;
top: 0;
left: 13rem;
padding-left: 1rem;
border-left: 1px solid #999;
}<div id=tiContainer>
<div tabindex=3>t3</div>
<div tabindex=4>t4</div>
<div tabindex=8>t8</div>
<div tabindex=6>t6</div>
<div tabindex=1>t1</div>
<div tabindex=9>t9</div>
<div tabindex=2>t2</div>
<div tabindex=10>t10</div>
<div tabindex=7>t7</div>
<div tabindex=5>t5</div>
</div>
<pre></pre>
·
Juan Pablo Isaza
Report
Answer question