Es gibt zahlreiche Kategorien von JavaScript -Ereignissen, aber in diesem Artikel werden wir die Verwendung von JavaScript Focus- und Blur -Ereignissen hervorheben.
JavaScript Focus- und Blur -Ereignisse
Wenn HTML -Elemente den Fokus gewinnen oder den Fokus verlieren, treten die Ereignisse für JavaScript -Fokus oder Unschärfe auf, die Teil des focusevent -Objekts sind.
Die Ereignisse, die in der Kategorie des JavaScript -Fokus- und Blur -Ereignisses klassifiziert sind, werden nachstehend demonstriert:
Jedes der oben genannten Ereignisse wird unten diskutiert.
Onblur -Veranstaltung
Das Onblur -Ereignis tritt auf, wenn der Fokus eines Objekts verloren geht. Es wird hauptsächlich im Validierungscode eines Formulars verwendet. Es sprudelt nicht und kann nicht storniert werden. Es unterstützt alle anderen HTML -Tags als , ,
, , ,
Syntax
Die Syntax des Onblur -Ereignisses ist wie folgt.
HTML -Syntax
JavaScript -Syntax
Objekt.onblur = function () script;JavaScript addEventListener () Syntax
Objekt.AddEventListener ("Blur", Skript);Beispiel
Die Funktion wechselt die unteren Fallbuchstaben in obere Fallbuchstaben.
Ausgang
Wenn Sie das Eingabefeld verlassen, tritt das Onblur-Ereignis auf und die unteren Niederlagen werden in den Buchstab.
Onfocus -Event
Das Onfocus -Ereignis tritt auf, wenn ein Element fokussiert ist. Es wird hauptsächlich mit, und verwendet . Es sprudelt nicht und kann nicht storniert werden. Es unterstützt alle anderen HTML -Tags als , ,
, , ,
Syntax
Die Syntax des Onfocus -Ereignisses ist wie folgt.
HTML -Syntax
JavaScript -Syntax
Objekt.onfocus = function () script;JavaScript addEventListener () Syntax
Objekt.AddEventListener ("Focus", Skript);Beispiel
Eine Funktion ändert die Hintergrundfarbe des Eingangsfeldes, wenn sie fokussiert ist.
Ausgang
Wenn Sie auf das Eingabefeld klicken, wird die Hintergrundfarbe des Eingangsfeldes in Blau geändert. Wir haben den Vorher und nach dem Zustand des Eingabefeldes unten gezeigt.
Vor
Nach
Onfocusin -Event
Das ONNFocusin -Ereignis ist gleich wie bei OnFocus -Ereignissen und tritt auf, wenn ein Element nur den Fokus erhält, aber ein subtiler Unterschied zwischen diesen beiden besteht darin. Es unterstützt alle anderen HTML -Tags als , ,
, , ,
Syntax
Syntax des Onfocusin -Ereignisses ist wie folgt.
HTML -Syntax
JavaScript -Syntax
Objekt.onfocusin = function () script;JavaScript addEventListener () Syntax
Objekt.AddEventListener ("Focusin", Skript);Beispiel
Klicken Sie auf das Eingabefeld
Ausgang
Vor dem Klicken auf das Eingabefeld.
Nach dem Klicken auf das Eingangsfeld wird die Hintergrundfarbe des Eingangsfeldes in Pink geändert.
Onfocusout -Event
Das Onnfocusout -Ereignis ist das gleiche wie das Onblur -Ereignis. Wenn ein Element nur den Fokus verliert, jedoch ein subtiler Unterschied zwischen diesen beiden besteht darin. Es unterstützt alle anderen HTML -Tags als , ,
, , ,
Syntax
Syntax des Onfocusout -Ereignisses ist wie folgt.
HTML -Syntax
JavaScript -Syntax
Objekt.onfocusout = function () script;JavaScript addEventListener () Syntax
Objekt.AddEventListener ("Focusout", Skript);Beispiel
Lassen Sie das Eingangsfeld so, dass die unteren Niederlagen in die obere Fälle verschoben werden.
Ausgang
Wenn Sie das Eingabefeld verlassen.
Abschluss
Ereignisse, die auftreten, wenn ein Element gewinnt oder seinen Fokus verliert. Ereignisse, die in die Kategorie der JavaScript -Fokus- und Blur -Ereignisse eingeteilt werden. Alle diese Ereignisse werden ausführlich zusammen mit geeigneten Beispielen erörtert.