Explication détaillée de la différence entre la frappe et la pression d'un événement clavier jQuery

Les événements du clavier seront déclenchés lorsque le clavier est enfoncé, dans l'ordre touche enfoncée ->

1. Les événements keydown et keypress sont déclenchés avant que le texte ne soit tapé dans la zone de texte. À ce moment, si le texte dans la zone de texte est affiché dans les événements keydown ou keypress, le texte obtenu avant le. L'événement clavier est déclenché, et keyup Lorsque l'événement est déclenché, toute l'opération de l'événement clavier est terminée. Ce qui est obtenu est le texte après le déclenchement de l'événement clavier

<input id="input" value="default" type="text" />
<script>var input = document.getElementById(&#39;input&#39;);
input.onkeydown = function() {
    console.log(&#39;onkeydown &#39; + this.value);
}
input.onkeypress = function() {
    console.log(&#39;onkeypress &#39; + this.value);
}
input.onkeyup = function() {
    console.log(&#39;onkeyup &#39; + this.value);
}</script>

Tapez le chiffre 1 dans le champ. zone de texte, et le résultat de sortie est :

onkeydown default
onkeypress default
onkeyup default1

2. La principale différence entre l'événement keypress et keydown et keyup

1) Il ne prend pas bien en charge la méthode de saisie chinoise et ne peut pas répondre à la saisie chinoise

2) Il ne peut pas répondre aux touches de fonction du système (telles que supprimer, retour arrière))

3) En raison des deux limitations précédentes, keyCode n'est pas cohérent avec keydown et keyup

3. L'événement par défaut du navigateur ne peut pas être empêché dans l'événement keyup, car dans Lorsque vous appuyez sur une touche, le comportement par défaut du navigateur a été terminé, c'est-à-dire que le texte est entré dans la zone de texte (bien qu'il ne soit pas encore affiché). Pour le moment, ni PreventDefault ni return false ne peuvent empêcher le comportement de saisie de texte dans la zone de texte, si vous souhaitez empêcher la saisie de texte dans la zone de texte. empêchez-le pendant la frappe ou la pression d'une touche.

<input id="input" value="default" type="text" />
<script>var input = document.getElementById(&#39;input&#39;);
input.onkeydown = function() {    //return false;
    console.log(&#39;onkeydown &#39; + this.value);
}
input.onkeypress = function() {    //return false;
    console.log(&#39;onkeypress &#39; + this.value);
}
input.onkeyup = function() {    return false;
    console.log(&#39;onkeyup &#39; + this.value);
}</script>

Le résultat est return false dans les événements keydown et keypress. La zone de texte ne peut pas saisir de texte et renvoie false dans l'événement keyup.

4. événement textInput

L'événement de réponse clavier de la zone de texte ajoute également textInpput La séquence de déclenchement est : keydown -> keypress -> 🎜>

L'événement textInput est pris en charge par DOM3 et est principalement utilisé pour remplacer la pression sur une touche. La principale différence avec la pression sur une touche est qu'il ajoute la prise en charge de la méthode de saisie chinoise. Un autre point est que textInput ne fonctionne qu'avec du texte modifiable. déclenché (comme l'entrée, la zone de texte) et la pression sur une touche peut être déclenchée par n'importe quel

contrôle

qui peut obtenir le focus (comme le bouton). Cependant, la prise en charge des événements textInput n'est pas très bonne actuellement. pris en charge par Safari et Chrome.

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!