Méthode simple jQuery pour obtenir le clavier events

Méthode simple jQuery pour obtenir le clavier events_jquery

WBOY

Libérer： 2016-05-16 15:18:37

original

1511 Les gens l'ont consulté

L'exemple de cet article décrit comment jQuery obtient simplement les événements du clavier. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

1. Quand devons-nous obtenir des événements de clavier

Lorsque nous travaillons sur le web, pour un design plus humain, nous utilisons parfois des événements clavier. Par exemple : boîte d'invite déroulante de la zone de saisie, utilisez le clavier haut et bas pour sélectionner le contenu souhaité, boîte d'invite déroulante de la zone de saisie de Google. Lorsque nous parcourons l'album photo, nous pouvons utiliser les touches gauche et droite du clavier pour visualiser les photos. Lorsque l'on parcourt un long roman, il est facile de perdre la trace de la ligne à lire en faisant défiler avec la souris. Vous pouvez utiliser les touches haut et bas du clavier pour tourner les pages. Ces petits détails sont également très importants. Créer un site Web dépend en grande partie des détails.

2. Types de fonctions du clavier de jquery

1. L'événement keydown est un événement déclenché lorsque le clavier est enfoncé
2. L'événement keyup est un événement déclenché lorsqu'une touche est enfoncée et que la touche est relâchée
3. L'événement keypress est un événement déclenché lorsque le clavier est enfoncé

Keypress et keydown ont des fonctions similaires, mais ils sont différents dans l'obtention du contenu de l'événement.

2. Exemples

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" dir="ltr" lang="utf-8">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script src="jquery-1.3.2.js" type="text/javascript"></script>
</head>
<body>
<input value="fi" name="search" id="search_input" maxlength="50" autocomplete="off">
</body>
</html>
<script type="text/javascript">
 $('#search_input')
 .keypress(function(event){
 alert("keypress");
 })
 .keydown(function(event){
 alert("keydown");
 })
 .keyup(function(event){
 alert("keyup");
 });
</script>

Copier après la connexion

3. Résultats des tests

1. Dans la zone de saisie ci-dessus, lors de la saisie d'une lettre r, la touche enfoncée apparaîtra pour la première fois et une pression sur la touche sera invitée à l'avenir
2. Lorsque nous appuyons sur pg dn銉, keyup apparaîtra d'abord, puis keydown
3. Lorsque nous appuyons sur Shift+c, seule la pression sur la touche
apparaîtra 4. Lorsque nous appuyons sur ctrl+alt, la touche enfoncée n'apparaîtra pas. Deux touches enfoncées apparaîtront pour la première fois. Lorsque nous appuyons dessus pour la deuxième fois, la touche enfoncée apparaîtra en premier, puis la touche enfoncée

Il existe de nombreuses possibilités, il suffit d'essayer le phénix couramment utilisé.

4. Obtenez la valeur ASCII correspondant à l'événement clavier

<script type="text/javascript">
 $('#search_input')
 .keydown(function(event){
 alert(event.keyCode);
 })
</script>

Copier après la connexion

Les lecteurs intéressés par plus de contenu lié aux opérations d'événements jQuery peuvent consulter le sujet spécial de ce site : "Résumé de l'utilisation et des techniques courantes des événements jQuery"

J'espère que cet article sera utile à tous ceux qui programment jQuery.