Comment puis-je capturer les frappes fléchées en JavaScript et jQuery ?

Capturer les frappes fléchées avec JS et jQuery

La liaison des fonctions aux touches fléchées en Javascript et jQuery est une exigence courante pour la navigation au clavier. Bien que le plugin js-hotkey pour jQuery étend la fonction de liaison intégrée, il ne prend pas en charge les touches fléchées.

Pour résoudre ce problème, voici une solution simple :

<code class="javascript">document.onkeydown = function(e) {
    switch(e.which) {
        case 37: // left
        break;

        case 38: // up
        break;

        case 39: // right
        break;

        case 40: // down
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
};</code>

Ce code capture frappes pour les touches fléchées gauche, haut, droite et bas à l'aide de l'instruction switch. Vous pouvez définir les actions souhaitées dans chaque cas.

Notez que pour les navigateurs qui ne prennent pas en charge la propriété which (comme IE8), modifiez le corps de la fonction comme suit :

<code class="javascript">document.onkeydown = function(e) {
    e = e || window.event;
    switch(e.which || e.keyCode) {
        case 37: // left
        break;

        // ...
    }
};</code>

Alternativement, pour les navigateurs modernes, la propriété KeyboardEvent.key peut être utilisée pour détecter les touches fléchées, comme le montre cet exemple :

<code class="javascript">document.onkeydown = function(e) {
    switch(e.key) {
        case "ArrowLeft": // left
        break;

        // ...
    }
};</code>

En implémentant ce code, vous pouvez facilement lier des fonctions aux touches fléchées de votre JavaScript. ou des applications jQuery.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!