À l'aide des touches fléchées pour naviguer

Je me demandais si il y avait une possibilité de naviguer avec les touches fléchées par le biais d'un tableau que j'ai créé avec JS(à l'aide de jQuery)? Je veux dire un saut à partir d'une cellule à l'autre...Le script pour Greasemonkey.

L'alerte, cependant, fonctionne. Je viens de recevoir aucune idée de comment faire cela fonctionne bien.

$(document).keydown(function(e){
    if (e.keyCode == 37) { 
       alert( "left pressed " );
       return false;
    }
    if (e.keyCode == 38) { 
       alert( "up pressed " );
       return false;
    }
    if (e.keyCode == 39) { 
       alert( "right pressed " );
       return false;
    }
    if (e.keyCode == 40) { 
       alert( "down pressed " );
       return false;
    }
});
;

Toute indication ou de tout ce qui est apprécié.
Merci d'avance,
Faili

Mise à jour

Il semble, comme je l'ai expliqué moi-même mal. Donnez-moi un autre essai:
Démo

Celui-ci peut vous donner une idée de ce que je voulais. Après avoir sélectionné une entrée de champ, d'une navigation avec les touches de direction est possible.
Mon problème est que je ne peux pas le réaliser via GM et jQuery. Une idée?

Merci encore pour votre temps et effort.

Enfin c'était:


function myTest_analysis1(e,leftkey,up,right,down){
    myTest(e,'','','field_analysis2','field_communication1')

function myTest(e,leftkey,up,right,down) { if (!e) e=window.event; var selectArrowKey; switch(e.keyCode) { case 37: //Key left. selectArrowKey = leftkey; break; case 38: //Key up. selectArrowKey = up; break; case 39: //Key right. selectArrowKey = right; break; case 40: //Key down. selectArrowKey = down; break; } if (!selectArrowKey) return;
var controls = window.document.getElementById(selectArrowKey); if (!controls) return; controls.focus(); } } $('#field_analysis1').keydown (myTest_analysis1);

C'est la façon dont il a travaillé pour moi. Je parie qu'il y est une meilleure solution, mais je ne pouvais pas le comprendre maintenant.

Merci sooo beaucoup pour votre temps et vos efforts.

source d'informationauteur Faili

Vous devriez être en mesure de cibler les différentes cellules, je vais mettre un exemple ensemble à l'aide .focus()

Ici est l'exemple.

S'il vous plaît garder à l'esprit que...

a) Il n'y a rien dans cet exemple pour vous empêcher de sortir des limites du terrain, vous devez restreindre les valeurs de currentRow et currentCell pour le nombre de cellules et de les empêcher de descendre en dessous de 0.

b) pour le moment, il n'y a pas de code pour supprimer le texte en vert, qui est ce que j'ai utilisé pour afficher le focus. Cela signifie une piste verte est à gauche derrière.

Vous pourriez résoudre les deux assez facilement, mais qu'ils allaient rendre l'exemple plus compliqué...

    var currentRow = 0;
    var currentCell = 0;

    function ChangeCurrentCell() {
        var tableRow = document.getElementsByTagName("tr")[currentRow];
        var tableCell = tableRow.childNodes[currentCell];
        tableCell.focus();
        tableCell.style.color = "Green";
    }
    ChangeCurrentCell();

    $(document).keydown(function(e){
        if (e.keyCode == 37) { 
           currentCell--;
           ChangeCurrentCell();
           return false;
        }
        if (e.keyCode == 38) { 
           currentRow--;
           ChangeCurrentCell();
           return false;
        }
        if (e.keyCode == 39) { 
           currentCell++;
           ChangeCurrentCell();
           return false;
        }
        if (e.keyCode == 40) { 
           currentRow++;
           ChangeCurrentCell();
           return false;
        }
    });

Ici est une version qui permet par la suite de

contraint au début et à la fin de la table (première et de la dernière cellule de la table)
roulés à la fin de chaque ligne et de passer à la prochaine
parchemins de la cellule active dans la vue si il y a les faire défiler pour voir
prend en charge la souris-cliquez sur pour sélectionner une cellule

Démo à : http://jsfiddle.net/BdVB9/

avec une structure html comme

<table id="navigate">
    <tbody>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

et javascript

var active = 0;
$(document).keydown(function(e){
reCalculate(e);
rePosition();
return false;
});
$('td').click(function(){
active = $(this).closest('table').find('td').index(this);
rePosition();
});
function reCalculate(e){
var rows = $('#navigate tr').length;
var columns = $('#navigate tr:eq(0) td').length;
//alert(columns + 'x' + rows);
if (e.keyCode == 37) { //move left or wrap
active = (active>0)?active-1:active;
}
if (e.keyCode == 38) { //move up
active = (active-columns>=0)?active-columns:active;
}
if (e.keyCode == 39) { //move right or wrap
active = (active<(columns*rows)-1)?active+1:active;
}
if (e.keyCode == 40) { //move down
active = (active+columns<=(rows*columns)-1)?active+columns:active;
}
}
function rePosition(){
$('.active').removeClass('active');
$('#navigate tr td').eq(active).addClass('active');
scrollInView();
}
function scrollInView(){
var target = $('#navigate tr td:eq('+active+')');
if (target.length)
{
var top = target.offset().top;
$('html,body').stop().animate({scrollTop: top-100}, 400);
return false;
}
}

voici ma version...

démo

var active;
$(document).keydown(function(e){
active = $('td.active').removeClass('active');
var x = active.index();
var y = active.closest('tr').index();
if (e.keyCode == 37) { 
x--;
}
if (e.keyCode == 38) {
y--;
}
if (e.keyCode == 39) { 
x++
}
if (e.keyCode == 40) {
y++
}
active = $('tr').eq(y).find('td').eq(x).addClass('active');
});

Vous devez vous connecter pour publier un commentaire.