Comment gérer la saisie des touches fléchées en JavaScript à l'aide d'événements clés ?

Gestion des entrées des touches fléchées en Javascript à l'aide d'événements clés

La détection et la gestion des entrées des touches fléchées peuvent être utiles pour divers scénarios de développement Web. Ceci peut être réalisé grâce aux capacités intégrées de gestion des événements clés du navigateur.

Solution utilisant les événements clés Javascript :

Le code Javascript fourni utilise le document.onkeydown gestionnaire d'événements pour écouter les pressions sur les touches. Lorsqu'une touche est enfoncée, la propriété event.which est utilisée pour déterminer le code de la touche. Les codes des touches fléchées correspondent aux valeurs suivantes :

• Flèche gauche : 37
• Flèche vers le haut : 38
• Flèche droite : 39
• Flèche vers le bas : 40

L'instruction switch gère ces codes clés et vous permet de définir votre logique personnalisée pour chaque pression sur une touche.

Mise en œuvre détaillée :

<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>

Considérations supplémentaires :

• Pour la prise en charge d'Internet Explorer 8, modifiez le début de la fonction comme suit : e = e || fenêtre.événement; switch(e.which || e.keyCode) {}
• Depuis 2020, KeyboardEvent.which est obsolète. Pour une solution plus moderne, utilisez KeyboardEvent.key :

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

        case "ArrowUp": // up
        break;

        case "ArrowRight": // right
        break;

        case "ArrowDown": // down
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
};</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!