Cet article fournit principalement une analyse détaillée et une introduction à la différence entre keyUp et keyDown dans JQuery Les amis qui en ont besoin peuvent venir s'y référer. J'espère qu'il sera utile à tout le monde
.Définition et utilisation
Le processus complet d'appui sur une touche est divisé en deux parties : 1. La touche est enfoncée 2. La touche est relâchée ;
L'événement keydown se produit lorsque le bouton est enfoncé.
La méthode keydown() déclenche l'événement keydown ou spécifie une fonction à exécuter lorsque l'événement keydown se produit.
Le code est le suivant :
<html>
<head>
<script type="text/
javascript
" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(
document
).ready(function(){
$("input").keydown(function(){
$("input").css("
background-color
","#FFFFCC");
});
$("input").keyup(function(){
$("input").css("background-color","#D6D6FF");
});
});
</script>
</head>
<body>
Enter your name: <input type="text" />
<p>当发生 keydown 和 keyup 事件时，输入域会改变颜色。请试着在其中输入内容。</p>
</body>
</html>
Comme nous le savons tous, jquery encapsule de nombreuses méthodes d'interaction avec des événements, et les problèmes mentionnés ici existent également en js natif.
Keyup n'est déclenché que lorsque l'utilisateur lève la touche. C'est la dernière étape de tout le processus d'appui sur une touche, il a donc son utilisation spécifique, qui est le processus de saisie à gauche et d'affichage simultané sur la touche. c'est vrai. Très utile. Un exemple typique est l’application de l’aperçu de l’édition des e-mails.
Le code est le suivant :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script src="JS/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#t1').live('keyup', function() {
$('#v1').text($(this).val());
});
$('#t2').live('keydown', function() {
$('#v2').text($(this).val());
});
$('#t3').live('keypress', function() {
$('#v3').text($(this).val());
});
});
</script>
</head>
<body>
<textarea id="t1"></textarea>
<p id="v1">
</p>
<textarea id="t2"></textarea>
<p id="v2">
</p>
<textarea id="t3"></textarea>
<p id="v3">
</p>
</body>
</html>
Trois événements sont appliqués ici respectivement, parmi lesquels t1 peut être complètement synchronisé avec v1, tandis que la pression sur la touche et la touche enfoncée sont toujours less last Un caractère, qui illustre la petite différence dans le déclenchement de ces trois événements, est déclenché lorsqu'on appuie sur une touche, et le résultat final de l'entrée ne peut pas être obtenu. Il en va de même pour la pression sur une touche.
Par exemple : keydown lie une zone de texte, et chaque clic déclenche un événement. Lors de l'obtention de la valeur de la zone de texte, le contenu de la zone de texte lors de la dernière opération est toujours imprimé
<🎜. >Cela est dû à l'opération keydown. Finalement, l'événement est déclenché, mais la valeur n'a pas encore été affichée dans la zone de texte, ce type d'opération nécessite donc un keyup complet à l'aide de keyup avant de pouvoir obtenir la valeur de la zone de texte. . keydown et keypress sont plus adaptés à l'implémentation de fonctions de type page via le contrôle du clavier. Cliquez sur la touche du clavier : Le code est le suivant :<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").keydown(function(event){
$("p").html("Key: " + event.which);
});
});
</script>
</head>
<body>Lorsque vous tapez du texte dans la zone ci-dessus, le p ci-dessous affiche le numéro de clé.