Maison >interface Web >js tutoriel >JQUERY CAPTURE Single Key Press Event (raccourcis clavier)
Catch Event unique de clés à l'aide de jQuery (raccourci clavier)
Pour améliorer les performances du site Web et l'expérience utilisateur, nous devrons peut-être ajouter des raccourcis clavier pour effectuer des tâches de site Web communes plus rapidement! Cet article expliquera dans un langage simple et facile à comprendre comment créer des événements de clavier à l'aide de jQuery - trouvez les codes de clés des touches clavier pressées.
Ce qui suit est la méthode d'implémentation:
//这是一个通用的设置,用于在jQuery中捕获keyup事件,并将结果记录到firebug控制台 if(typeof console == 'undefined'){ console = {}; console.log = function(arg){return false;}; } $(document).keyup(function(e){ //找出按下了哪个键 switch(e.keyCode){ case 65 : console.log('a'); break; // a case 66 : console.log('b'); break; // b case 67 : console.log('c'); break; // c case 68 : console.log('d'); break; // d case 69 : console.log('e'); break; // e case 70 : console.log('f'); break; // f case 71 : console.log('g'); break; // g case 72 : console.log('h'); break; // h case 73 : console.log('i'); break; // i case 74 : console.log('j'); break; // j case 75 : console.log('k'); break; // k case 76 : console.log('l'); break; // l case 77 : console.log('m'); break; // m case 78 : console.log('n'); break; // n case 79 : console.log('o'); break; // o case 80 : console.log('p'); break; // p case 81 : console.log('q'); break; // q case 82 : console.log('r'); break; // r case 83 : console.log('s'); break; // s case 84 : console.log('t'); break; // t case 85 : console.log('u'); break; // u case 86 : console.log('v'); break; // v case 87 : console.log('w'); break; // w case 88 : console.log('x'); break; // x case 89 : console.log('y'); break; // y case 90 : console.log('z'); break; // z } });
Les questions fréquemment posées sur la capture d'événements clés uniques
Pour utiliser jQuery pour capturer une seule touche, vous pouvez utiliser la méthode keypress()
. Cette méthode déclenche l'événement keypress
ou attache une fonction qui s'exécute lorsque l'événement keypress
se produit. Voici un exemple simple:
$(document).keypress(function(event){ alert('按下的键:' + String.fromCharCode(event.which)); });Quelle est la différence entre les événements
keydown
, keypress
et keyup
? keydown
, keypress
et keyup
Les événements sont tous liés aux interactions du clavier, mais elles sont déclenchées à différents moments. L'événement keydown
est déclenché lorsque la touche est enfoncée. L'événement keypress
est déclenché lorsque la touche qui génère la valeur de caractère est enfoncée. L'événement keyup
est licencié lorsque la clé est libérée.
Pour bloquer le fonctionnement par défaut des événements de presse de touches dans la fonction du gestionnaire d'événements, vous pouvez utiliser la méthode event.preventDefault()
. Par exemple, si vous souhaitez empêcher la soumission du formulaire lorsque la touche ENTER est enfoncée, vous pouvez effectuer ce qui suit:
$('form').keypress(function(event){ if(event.which == 13){ event.preventDefault(); alert('阻止表单提交!'); } });
Vous pouvez utiliser l'attribut event.which
dans la fonction de gestionnaire d'événements pour détecter la touche appuyée. Cette propriété renvoie la valeur Unicode de la clé qui déclenche l'événement keypress
. Par exemple:
$(document).keypress(function(event){ alert('按下的键:' + String.fromCharCode(event.which)); });
keypress
peut-il être utilisé pour détecter les clés non-caractère? Non, l'événement keypress
n'est déclenché que lorsque la touche qui génère la valeur de caractères est enfoncée. Cela signifie qu'il ne déclenchera pas les clés qui ne produisent pas de caractères, etc. Si vous avez besoin de détecter les clés non-personnages, utilisez à la place les événements keydown
ou keyup
.
(Les réponses aux questions suivantes sont les mêmes que le texte d'origine, omis ici d'éviter la duplication.)
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!