suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erklärung des Unterschieds zwischen keyUp und keyDown in JQuery

Detaillierte Erklärung des Unterschieds zwischen keyUp und keyDown in JQuery

黄舟
黄舟Original
2017-06-27 13:39:311650Durchsuche

Dieser Artikel bietet hauptsächlich eine detaillierte Analyse und Einführung in den Unterschied zwischen keyUp und keyDown in JQuery. Freunde, die ihn benötigen, können ihn besuchen und hoffen, dass er für alle hilfreich ist

Definition und Verwendung
Der gesamte Tastendruckvorgang ist in zwei Teile unterteilt: 1. Die Taste wird gedrückt. 2. Die Taste wird losgelassen.

Das Keydown-Ereignis tritt auf, wenn die

-Taste gedrückt wird.

Die Methode keydown() löst das Keydown-Ereignis aus oder gibt eine Funktion an, die ausgeführt werden soll, wenn das Keydown-Ereignis auftritt.

Der Code lautet wie folgt: 

<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>

Wie wir alle wissen, kapselt JQuery viele Ereignisinteraktionsmethoden, und die hier erwähnten Probleme treten auch in nativem JS auf.

Keyup wird nur ausgelöst, wenn der Benutzer die Taste anhebt. Es ist die letzte Phase des gesamten Tastendruckvorgangs und hat daher seinen spezifischen Zweck, nämlich den Vorgang des Tippens auf der linken Seite und der gleichzeitigen Anzeige auf der richtig. Sehr nützlich. Ein typisches Beispiel ist die Anwendung der E-Mail-Bearbeitungsvorschau.


Der Code lautet wie folgt:

<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() {
            $(&#39;#t1&#39;).live(&#39;keyup&#39;, function() {
                $(&#39;#v1&#39;).text($(this).val());
            });
            $(&#39;#t2&#39;).live(&#39;keydown&#39;, function() {
                $(&#39;#v2&#39;).text($(this).val());
            });
            $(&#39;#t3&#39;).live(&#39;keypress&#39;, function() {
                $(&#39;#v3&#39;).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>

Hier werden jeweils drei Ereignisse angewendet, von denen t1 vollständig mit v1 synchronisiert werden kann, während Tastendruck und Tastendruck immer erfolgen weniger letztes Ein Zeichen, das den kleinen Unterschied in der Auslösung dieser drei Ereignisse verdeutlicht, wenn gedrückt wird, und das endgültige Eingabeergebnis kann nicht erhalten werden.

Zum Beispiel: Keydown bindet ein Textfeld und jeder Klick löst ein Ereignis aus. Nachdem der Wert des Textfelds abgerufen wurde, wird immer der Inhalt des Textfelds zum Zeitpunkt der letzten Operation gedruckt >

Dies liegt an der Keydown-Operation. Schließlich wird das Ereignis ausgelöst, der Wert wurde jedoch noch nicht im Textfeld angezeigt, sodass diese Art von Operation eine vollständige Eingabe mit Keyup vor dem Wert des Textfelds erfordert erhalten werden kann.

Tastendruck und Tastendruck eignen sich eher für die Implementierung seitenähnlicher Funktionen durch Tastatursteuerung.

Lassen Sie die Taste auf der Tastatur drücken:

Der Code lautet wie folgt:

Bitte geben Sie einige Zeichen ein, wie Sie möchten: bc6ca2c8dda4d0167a5433f6ba367201
<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>
e388a4556c0f65e1904146cc1a846beeWährend Sie Text in das Feld oben eingeben, zeigt das p unten die Schlüsselnummer an. 94b3e26ee717c64999d7867364b1b4a3

7493e18ec8d2afde690a0696fdaf5e59
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung des Unterschieds zwischen keyUp und keyDown in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung der Verwendung und Definition der Funktion jQuery.keydown()Nächster Artikel：Detaillierte Erläuterung der Verwendung und Definition der Funktion jQuery.keydown()

In Verbindung stehende Artikel

Mehr sehen