2
I need to navigate the DOM through the arrow keys. I can accomplish it when it goes only in two directions (up or down, front or back), but to move in the four directions I did not find a way. I need this navigation to take into account only a certain selector, in case the tag '<a>
' Ex:
Source:
<body>
<a href="#">teste</a> <a href="#">TESTE</a> <a href="#">teste</a> <a href="#">TESTE</a><br/>
<a href="#">teste</a> <a href="#">TESTE</a> <a href="#">teste</a> <a href="#">TESTE</a><br/>
<a href="#">teste</a> <a href="#">TESTE</a> <a href="#">teste</a> <a href="#">TESTE</a><br/>
<script>
$(document).ready(function(){
$(document).keydown(function(e){
switch (e.keyCode)
{
//esquerda
case 37:
var elAtivo = document.activeElement;
var elAnterior = $(elAtivo).prevAll('a').first();
$(elAnterior).focus();
break;
//cima
case 38:
break;
//direita
case 39:
var elAtivo = document.activeElement;
var elProximo = $(elAtivo).nextAll('a').first();
$(elProximo).focus();
break;
//baixo
case 40:
break;
}
});
});
</script>
</body>
You could post the code you have so far?
– Felipe Augusto
I edited the question to display how the code is currently.
– Gustavo Castro