Die Tastatur ist eines der Hauptgeräte für die Interaktion zwischen Mensch und Computer. Mit den Tasten können wir Text eingeben, Programme verwalten und durch verschiedene Elemente der Benutzeroberfläche navigieren. Für Entwickler von Websites und Webanwendungen ist es wichtig, dass sie die Tastenanschläge auf der Tastatur erfassen und bestimmte Aktionen ausführen können, die von ihnen abhängig sind.
Wenn Sie gerade anfangen, JavaScript und jQuery zu lernen, kennen Sie wahrscheinlich bereits eine Ereignisbehandlungsfunktion, die es uns ermöglicht, bestimmten Code auszuführen, wenn ein bestimmtes Ereignis eintritt. Aber was ist, wenn wir Tastatureingaben verfolgen wollen?
jQuery bietet eine spezielle Funktion zum Verfolgen von Tastaturereignissen - keydown(). Diese Funktion ermöglicht es uns, einen bestimmten Code auszuführen, wenn eine Taste auf der Tastatur gedrückt wird. Darüber hinaus erleichtert es die Arbeit mit Zusatztasten wie Umschalt, Strg und Alt und ermöglicht es Ihnen, Tastenkombinationen wie Strg+C oder Strg+ V zu verfolgen.
Beispiel: $('body').keydown(function(event) < // code, der ausgeführt wird, wenn eine Taste gedrückt wird >);
Bei Verwendung der Funktion keydown() wir können einen Ereignishandler als Argument übergeben. Innerhalb dieses Handlers können wir abhängig vom Code der gedrückten Taste einen bestimmten Code ausführen. Zum Beispiel können wir die Hintergrundfarbe einer Seite ändern, wenn Sie die Taste "R" drücken oder ein Element ausblenden, wenn Sie die Taste "Esc" drücken.
Grundlagen der Arbeit mit Jquery auf der Tastatur
Jquery bietet praktische Tools für die Arbeit mit der Tastatur, mit denen Sie Tastatureingaben leicht verarbeiten und entsprechende Aktionen ausführen können. Dies ist besonders nützlich, wenn Sie interaktive Anwendungen und Websites erstellen, auf denen Sie die Aktivitäten des Benutzers mit der Tastatur überwachen möchten.
Um mit Jquery auf der Tastatur zu beginnen, müssen Sie die Jquery-Bibliothek mit Ihrem Projekt verbinden. Sie können dies mit einem Tag tun und den Pfad zur Bibliotheksdatei angeben:
Nachdem Sie Jquery angeschlossen haben, können Sie mit der Tastatur beginnen. Dazu muss die Methode verwendet werden .keydown() , das die Tastenanschläge verfolgt. Als Argument wird eine Funktion an die Methode übergeben, die bei jedem Tastendruck ausgeführt wird. Zum Beispiel:
$(document).keydown(function(event) ); In diesem Beispiel wird beim Drücken einer beliebigen Taste der Code in der Browserkonsole angezeigt.
Auch mit der Methode .keypress() Sie können die Eingabe von Zeichen über die Tastatur verfolgen. Der folgende Code gibt beispielsweise die vom Benutzer eingegebenen Zeichen in die Konsole aus:
$(document).keypress(function(event) ); Sie können die Tastenanschlagverfolgung bei Bedarf auf ein bestimmtes Element auf der Seite beschränken, indem Sie den Jquery-Selektor verwenden. Der folgende Code verfolgt beispielsweise die Tastenanschläge nur innerhalb eines Elements mit der ID "my-element":
$("#my-element").keydown(function(event) ); Jquery bietet auch praktische Methoden für die Arbeit mit Tastaturmodifikatoren wie Strg, Umschalt und Alt. Zum Beispiel die event-Methode.ctrlKey gibt true zurück, wenn die Strg-Taste gedrückt wird.
Abschließend bietet die Arbeit mit Jquery auf der Tastatur viele Möglichkeiten, interaktive und benutzerfreundliche Webanwendungen zu erstellen. Mit Methoden .keydown() und .keypress() , Sie können Tastatureingaben verfolgen und entsprechende Aktionen ausführen, und mit Hilfe von Tastenmodifikatoren können Sie Anwendungen noch flexibler gestalten.
Installieren und Verbinden der jQuery-Bibliothek
1. Gehen Sie zur offiziellen jQuery-Website unter https://jquery.com /.
2. Klicken Sie im oberen Menü der Website auf die Schaltfläche "Download". Als Ergebnis gelangen Sie zur jQuery-Download-Seite.
3. Auf der jQuery-Download-Seite können Sie zwischen zwei Versionen der Bibliothek wählen: "Production" und "Development". Es wird empfohlen, eine "Production" -Version zu verwenden, die bereits für die Verwendung in realen Projekten optimiert und minimiert wurde.
4. Klicken Sie mit der rechten Maustaste auf den Link "Download the compressed, production jQuery 3.6.0". Wählen Sie im Kontextmenü die Option Verknüpfung speichern unter oder einen ähnlichen Menüeintrag aus.
5. Geben Sie den Pfad zum Speichern der Datei an und klicken Sie auf Speichern.
6. Nachdem Sie die jQuery-Datei gespeichert haben, kopieren Sie sie in den Projektordner, in dem Sie die JavaScript-Dateien gespeichert haben.
7. Um jQuery mit Ihrer Webseite zu verbinden, fügen Sie den folgenden Code in den HEAD-Abschnitt Ihres HTML-Dokuments ein:
8. Jetzt können Sie alle Funktionen und Funktionen der jQuery-Bibliothek in Ihrem Projekt verwenden.
Glückwunsch! Sie haben die jQuery-Bibliothek erfolgreich installiert und mit Ihrer Webseite verbunden. Jetzt können Sie mit den leistungsstarken Funktionen beginnen, um interaktive und dynamische Webseiten zu erstellen.
Beschreibung der wichtigsten Methoden und Ereignisse
Methoden:
addClass(className): fügt die angegebene Klasse allen ausgewählten Elementen hinzu.
removeClass(className): entfernt die angegebene Klasse für alle ausgewählten Elemente.
toggleClass(className): fügt die angegebene Klasse zu Elementen hinzu, die sie nicht haben, und entfernt sie von Elementen, die sie bereits haben.
css(property, value): legt einen Wert für die angegebene CSS-Eigenschaft für alle ausgewählten Elemente fest.
text(textContent): legt den Textinhalt für alle ausgewählten Elemente fest.
html(htmlContent): legt den HTML-Inhalt für alle ausgewählten Elemente fest.
val(value): legt den Wert für das Eingabefeld für alle ausgewählten Elemente fest.
Ereignisse:
click: wird ausgelöst, wenn auf ein Element geklickt wird.
keypress: wird ausgelöst, wenn Sie eine Taste auf einem fokussierten Element drücken und loslassen.
keydown: wird ausgelöst, wenn Sie eine Taste auf einem Element mit Fokus drücken.
keyup: wird ausgelöst, wenn Sie die Taste an einem fokussierten Element loslassen.
focus: wird ausgelöst, wenn das Fokuselement den Fokus erhält.
blur: wird ausgelöst, wenn das Fokuselement verloren geht.
mouseenter: wird ausgelöst, wenn Sie den Mauszeiger über ein Element bewegen.
mouseleave: wird ausgelöst, wenn der Cursor aus einem Element abgeleitet wird.
Beispiele für die Verwendung der Jquery-Funktion auf der Tastatur
Hier sind einige Beispiele für die Verwendung der Jquery-Funktion auf der Tastatur:
1. Keypress-Ereignis:
Das Keypress-Ereignis wird ausgelöst, wenn der Benutzer eine Taste auf der Tastatur drückt und gedrückt hält. Der folgende Code zeigt beispielsweise jedes Mal, wenn ein Benutzer eine Taste drückt, ein Alert-Fenster mit einem Unicode-Zeichen an:
2. Keydown-Ereignis:
Das Keydown-Ereignis wird ausgelöst, wenn der Benutzer eine Taste auf der Tastatur drückt. Es folgt ein Beispielcode, der beim Drücken einer Taste ein Alertfenster mit einem Unicode-Zeichen anzeigt:
3. Keyup-Ereignis:
Das Keyup-Ereignis wird ausgelöst, wenn der Benutzer eine Taste auf der Tastatur loslässt. Beispielcode, der ein Unicode-Zeichen in einem Alert-Fenster ausgibt, wenn die Taste losgelassen wird:
4. Schlüsselcode:
Verwenden Sie event, um zu bestimmen, welche Taste gedrückt wurde.which. Zum Beispiel:
Wenn der Benutzer in diesem Beispiel die Eingabetaste auf der Tastatur drückt, wird die Meldung "Enter key pressed" angezeigt.
