Événements clavier des événements jQuery (touche ctrl Entrée pour soumettre le formulaire, etc.)_jquery

Les événements de clavier gèrent toutes les frappes de l'utilisateur, que ce soit à l'intérieur ou à l'extérieur de la zone de saisie de texte. La portée des événements de clavier est différente selon les navigateurs. Généralement, ce type d'événements de clavier peut agir sur des éléments tels que des éléments de formulaire, des éléments de balise, une fenêtre et un document. Les événements de clavier peuvent être déclenchés sur tous les éléments pouvant obtenir des points d'intersection. Les éléments pouvant obtenir le focus peuvent être compris de cette manière. Les éléments auxquels il est possible d'accéder lors de l'utilisation de la touche Tab sont des éléments qui peuvent utiliser des événements de clavier (si tabindex n'est pas défini. pour ces éléments) Dans le cas de valeurs d'attribut, lorsque tabindex est défini sur un nombre négatif, le focus ne sera pas obtenu lors de l'utilisation de la touche Tab).

Les événements clavier peuvent transmettre un événement paramètre. En fait, tous les événements jQuery peuvent transmettre un tel paramètre. Cet événement est un objet, qui inclut certaines propriétés. Lorsque l'événement est déclenché, vous pouvez utiliser l'événement pour obtenir. quelques informations sur l'événement. Par exemple, lors de l'utilisation du clavier, vous pouvez utiliser event.keyCode pour obtenir la valeur du code ASCII de la touche enfoncée. Voir ci-dessous

1 : L'événement keydown() est le premier événement clavier déclenché lorsque le clavier est cliqué. Si l'utilisateur continue de maintenir la touche enfoncée, l'événement keydown continuera.

Copier le code Le code est le suivant :

$('input').keydown( function(event ){
          alert(event.keyCode); 
          });
Plus de contrôle sur ces éléments peut être obtenu grâce aux valeurs renvoyées par le clavier, telles que les touches haut, bas, gauche et droite, respectivement : 38, 40, 37, 39.

2 : L'événement keypress() est similaire à keydown, à une exception près. Si vous devez empêcher le comportement par défaut de la touche, vous devez utiliser l'événement keypress.

3 : L'événement keyup() est le dernier événement à se produire (après l'événement keydown), cet événement n'est déclenché qu'une seule fois lorsque le clavier est relâché (car le relâchement du clavier n'est pas un état continu). .

Copier le code Le code est le suivant : $('input').keyup( funciton() {

         alert('la fonction keyup est en cours d'exécution !!');

          });



4 : Dans jQuery, les événements keydown, keypress et keyup sont exécutés dans un certain ordre.

Copier le code Le code est le suivant : $('input').keyup( function() {

              console.log('keyup');

         } } );
Les résultats de l'exécution sont : keydown, keypress, keyup.
La raison pour laquelle alert n'est pas utilisée ici est que certains événements ne pourront pas se produire pendant l'alerte. Ici, l'événement keyup sera empêché de se produire. souhaitez expérimenter ce code, peut être effectué sous Firefox, et le plug-in Firebug doit être installé sur le navigateur. Installez en toute confiance car Firefox est un navigateur open source. Faites confiance aux logiciels open source.

jQuery dispose de trois fonctions pour gérer les événements du clavier. Selon l'ordre dans lequel les événements se produisent, ce sont :





Copier le code

Le code est le suivant :

keydown();

keyup( );

appui sur la touche();

keydown()

L'événement keydown sera déclenché lorsque le clavier est enfoncé. Vous pouvez renvoyer false dans la fonction liée pour empêcher le déclenchement de l'événement par défaut du navigateur.

keyup()

L'événement keyup sera déclenché lorsque la touche est relâchée, c'est-à-dire l'événement après que vous ayez appuyé sur le clavier et que vous vous leviez

appui sur une touche()

L'événement keypress est déclenché lorsqu'une touche est enfoncée. Nous pouvons le comprendre comme appuyer et soulever la même touche

.

Comment pouvons-nous savoir si j'ai appuyé sur le bouton A, Z ou Entrée

?

Les événements de clavier peuvent transmettre un événement de paramètre. En fait, certaines fonctions d'événement jQuery peuvent transmettre un tel paramètre

Copier le code Le code est le suivant :

$('input').keydown( function(event ){
alert(event.keyCode);
});

Dans le code ci-dessus, event.keyCode peut nous aider à obtenir sur quelle touche nous avons appuyé. Il renvoie le code ascII, tel que les touches haut, bas, gauche et droite, qui sont respectivement 38, 40, 37, 39

Si nous voulons implémenter ctrl Enter, c'est ctrl Enter pour soumettre le formulaire

Copier le code Le code est le suivant :

$(document).keypress(function( e) {
if (e.ctrlKey && e. Which == 13)
$("form").submit();
})

Autres informations de référence :

Connaissances préliminaires

1. Valeur clé numéro 0 48.. Valeur clé numéro 9 57
2. une valeur clé 97.. valeur clé z 122.. Valeur clé Z 90
3. 43;-Valeur de clé 45;.Valeur de clé 46;Retour arrière 8;Valeur de clé de tabulation 9
4.event est global dans IE et est un objet temporaire dans Firefox, et les paramètres doivent être transmis

Copier le code Le code est le suivant :

*/
jQuery.extend( {
/*============================================ ==== ============================
Description de la fonction : Obtenir la valeur de la clé
Méthode d'appel :
jQuery.getKeyNum (event);
*/
getKeyNum:function(e){
var keynum;
if(window.event){ // IE
keynum = event .keyCode;
}
else if(e.which){ // Netscape/Firefox/Opera
keynum = e.which;
return keynum;
},
/*== ============================================ ====== =======================
Description de la fonction : Déterminer s'il s'agit d'un nombre entier, restreindre la zone d'édition à la saisie uniquement de nombres
Méthode d'appel :
Problèmes à résoudre :
La touche de tabulation ne fonctionne pas dans firefox.
*/
isInt. :function(e){
var keynum = this.getKeyNum(e);
if(keynum >= 48 && keynum <= 57 || keynum == 8){//Espace arrière requis dans le jugement Firefox 8
return true
}
return false;
/*=========== =========== ======================================== =========== ===
Description de la fonction : Déterminez s'il s'agit d'une décimale. Limitez la zone d'édition à uniquement des nombres et un point décimal
Méthode d'appel :
< input type="text" onkeypress="return jQuery. .isFloat(this,event);"
*/
isFloat:function(txt,e){
var keynum = this.getKeyNum (e);
if(keynum == 46){//Entrer le point décimal
if(txt.value.length == 0){
return false
}else if(txt. value.indexOf('.') >= 0) {
return false
}else{
return true
}
if(this.isInt(e) )){
return true;
}
return false
}
});