Wie Keycodes in JavaScript funktionieren?

Schlüsselcodes in JavaScript funktionieren, indem der entsprechenden Schlüssel einen bestimmten Schlüsselcodewert zugewiesen wird. Diese Funktionalität hilft dem Benutzer daran, einen ungültigen Wert einzugeben, insbesondere beim Ausfüllen eines Formulars oder eines Fragebogens. In ähnlicher Weise fordert es den Endbenutzer der Aktivierten auf “Caps Lock”Beim Füllen eines Fall-sensitiven Feldes.

Was sind Schlüsselcodes?

JavaScript weist jedem in einer Tastatur enthaltenen Taste einen numerischen Code zu. Schlüsselcodes für alphanumerische und Funktionstasten werden nacheinander nummeriert. In diesem Blog wird die Arbeit der folgenden Schlüsselcodes gegen die jeweiligen Schlüssel erklärt:

Taste	Schlüsselcode
Tab	9
Eingeben	13

Syntax

Fall.Schlüsselcode

In der obigen Syntax:

• “Fall”Bezieht sich auf das beigefügte Ereignis auf den jeweiligen Schlüssel gegen den Schlüsselcode.

Wie funktionieren Keycodes in JavaScript??

Die Arbeit von Schlüsselcodes kann durch die Verwendung der “durchgeführt werdenAddEventListener ()Methode in Kombination mit den folgenden Methoden:

• “GetElementById ()" Methode.
• “QuerySelector ()" Methode.

Ansatz 1: Arbeiten von Schlüsselcodes in JavaScript unter Verwendung der GetElementById () -Methode

Der "AddEventListener ()Methode hängt ein Ereignis an das Element und die “beiGetElementById ()"Methode greift auf ein Element zu, das mit dem angegebenen"Ausweis”. Diese Methoden können verwendet werden, um auf das Feld Eingabetext zuzugreifen und den jeweiligen Schlüssel mit Hilfe des zugewiesenen Schlüsselcode und eines angehängten Ereignisses zu erkennen.

Syntax

Element.AddEventListener (Ereignis, Listener, Verwendung);

In der obigen Syntax:

• “Fall”Zeigt das beigefügte Ereignis an.
• “HörerEntspricht der Funktion, die aufgerufen wird.
• “verwenden”Ist der optionale Wert.

dokumentieren.GetElementById (Element)

In der angegebenen Syntax:

• “Element”Entspricht der“AusweisGegen das jeweilige Element abgerufen werden.

Beispiel

Konzentrieren wir uns auf das folgende Beispiel:

Registerkartenschlüssel erkennen

Lassen Sie Get = Dokument.GetElementById ("Text");
lass result = document.GetElementById ("Kopf");
erhalten.AddEventListener ("Keydown", (e) =>
if (e.KeyCode === 9)
Ergebnis.InnerText = "Tab -Taste gedrückt";

anders
Ergebnis.InnerText = "Tab -Taste nicht gedrückt";

);

Im obigen Code-Snippet:

• Eine Eingabe zuweisen “Text"Feld mit dem angegebenen"Ausweis" Und "Platzhalter" Wert.
• Fügen Sie im nächsten Schritt die angegebene Überschrift bei der Erkennung des jeweiligen Schlüssel.
• Greifen Sie im JavaScript -Teil des Codes auf die Eingabe zu “Text"Feld und die mitgelieferte Überschrift durch ihre"ids" Verwendung der "GetElementById ()" Methode.
• Danach ein Ereignis namens namens “Taste nach unten" zum "Eingang”Textfeld mit der“AddEventListener ()" Methode.
• Wenden Sie auch das an “SchlüsselcodeEigenschaft und weisen Sie ihm den Schlüsselcode der “zuTab" Taste.
• Dies führt dazu, dass die angegebene Nachricht in der “angezeigt wirdWennBedingung als Überschrift beim Erkennen der Registerkartenschlüssel über die “InnerText" Eigentum.
• Im anderen Fall die “andersBedingung wird ausgeführt.

Ausgang

Aus dem obigen Ausgang kann beobachtet werden, dass die Erkennung des “TabDer Schlüssel wird erfolgreich erledigt.

Ansatz 2: Arbeiten von Schlüsselcodes in JavaScript unter Verwendung der Methode querySelector ()

Der "QuerySelector ()Die Methode erhält das erste Element, das einem CSS -Selektor entspricht. Diese Methode kann verwendet werden, um in ähnlicher Weise auf das Feld Eingabetext zugreifen und ein Ereignis anhängen, was zur Erkennung des angegebenen Schlüssels basierend auf dem Schlüsselcode führt.

Syntax

dokumentieren.QuerySelector (CSS -Selektoren)

In der obigen gegebenen Syntax:

• “CSS -Selektoren”Bezieht sich auf einen oder mehr als einen CSS -Selektoren.

Beispiel

Beobachten wir das folgende Beispiel Schritt für Schritt:

Erkennen Sie die Eingabetaste

Lassen Sie Get = Dokument.QuerySelector ("Eingabe");
lass result = document.QuerySelector ("H2");
erhalten.AddEventListener ("Keydown", (e) =>
if (e.KeyCode === 13)
Ergebnis.InnerText = "Taste eingeben";

anders
Ergebnis.InnerText = "Taste nicht gedrückt";

);

Führen Sie in den obigen Codezeilen die folgenden Schritte aus:

• Erinnern Sie sich an die besprochenen Schritte, um ein Eingabtextfeld und eine Überschrift aufzunehmen.
• Greifen Sie im JavaScript -Teil in ähnlicher Weise auf das zugewiesene Eingangsfeld und die Überschrift mit der “zu"QuerySelector ()" Methode.
• Fügen Sie im nächsten Schritt ein Ereignis mit dem Namen "Taste nach unten" zum "Eingang"Textfeld" mit der "AddEventListener ()" Methode.
• Geben Sie auch das an “Schlüsselcode" des "Eingeben"Schlüssel über die"Schlüsselcode" Eigentum.
• Dies führt dazu, dass die entsprechende Nachricht in der “angezeigt wirdWenn"Bedingung auf dem erkannten"Eingeben" Taste.
• Im anderen Fall die “andersBedingung bleibt in Kraft.

Ausgang

In der obigen Ausgabe kann beobachtet werden, dass bei der Erkennung der ““EingebenSchlüssel, die Überschrift ändert sich und macht die Erkennung erfolgreich.

Abschluss

Der "AddEventListener ()„Methode in Kombination mit dem“GetElementById ()Methode oder die “QuerySelector ()Die Methode kann implementiert werden, um die Arbeit von Schlüsselcodes in JavaScript zu gewährleisten. Der erstere Ansatz kann verwendet werden, um auf das Feld Eingabetext zuzugreifen und den spezifischen Schlüssel über Schlüsselcode mit Hilfe eines beigefügten Ereignisses zu erkennen. Der letztere Ansatz kann angewendet werden, um auf das Feld Eingabetext zuzugreifen und ihm ein Ereignis anzuschließen, das den spezifischen Schlüssel basierend auf seinem Schlüsselcode erkennt. In diesem Tutorial wurde die Arbeit von Schlüsselcodes in JavaScript erläutert.