Maison > Article > interface Web > 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!