Comment lier les touches fléchées en JavaScript et jQuery ?

Touches fléchées de liaison de touches en JavaScript et jQuery

L'amélioration des interactions utilisateur nécessite souvent de lier des fonctions à des touches spécifiques. Les touches fléchées sont couramment utilisées pour la navigation, mais elles peuvent être difficiles à intégrer dans JavaScript et jQuery.

Solution jQuery

Alors que le plugin js-hotkey offre une liaison de touches améliorée capacités, il ne prend pas en charge les touches fléchées. Cependant, le gestionnaire d'événements keydown de jQuery fournit une solution alternative.

<code class="js">$(document).keydown(function(e) {
    switch (e.which) {
        case 37: // Left
            // Insert your left arrow key code
            break;
        case 38: // Up
            // Insert your up arrow key code
            break;
        case 39: // Right
            // Insert your right arrow key code
            break;
        case 40: // Down
            // Insert your down arrow key code
            break;
    }
    e.preventDefault();
});</code>

Solution JavaScript pure

L'utilisation de l'événement onkeydown de JavaScript est une autre approche des touches fléchées de liaison.

<code class="js">document.onkeydown = function(e) {
    switch (e.which) {
        case 37: // Left
            // Insert your left arrow key code
            break;
        case 38: // Up
            // Insert your up arrow key code
            break;
        case 39: // Right
            // Insert your right arrow key code
            break;
        case 40: // Down
            // Insert your down arrow key code
            break;
    }
    e.preventDefault();
};</code>

Compatibilité entre navigateurs

Pour la compatibilité avec les navigateurs plus anciens comme IE8, ajoutez e = e || fenêtre.événement; switch(e.which || e.keyCode) { avant le corps de la fonction.

Solution moderne

KeyboardEvent.qui est désormais obsolète. Une approche plus moderne consiste à utiliser KeyboardEvent.key :

<code class="js">document.addEventListener('keydown', function(e) {
    switch (e.key) {
        case 'ArrowLeft':
            // Insert your left arrow key code
            break;
        case 'ArrowUp':
            // Insert your up arrow key code
            break;
        case 'ArrowRight':
            // Insert your right arrow key code
            break;
        case 'ArrowDown':
            // Insert your down arrow key code
            break;
    }
    e.preventDefault();
});</code>

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!