Detaillierte Erklärung der JavaScript-Ereignisse onblur und onfocus

Auf HTML-Seiten verfügen visuelle Elemente wie Schaltflächen und Textfelder über Ereignisse zum Erhalten und Verlieren des Fokus, die als Reaktion auf Maus- oder Tastaturaktionen voreingestellte Vorgänge auslösen können. In diesem Artikel wird am Beispiel eines Textfelds, das den Fokus gewinnt und verliert, die Anwendung von onfocus und onblur kurz erläutert.

1. onfocus (Fokus-Ereignis abrufen)

Wenn ein Textfeld den Fokus erhält, wird der gesamte Text darin automatisch ausgewählt, genau wie das Baidu-Sucheingabefeld auf der Website „hao123“. Dieser Vorgang kann mit onfocus erreicht werden.

Wenn Sie den Mauszeiger über das folgende Textfeld bewegen, wird der gesamte darin enthaltene Text ausgewählt:

Bitte geben Sie die URL ein

Wie wird das gemacht? Siehe den folgenden Code und die Erklärung:

<Eingabetyp="Text" Name="URL" Wert="http://www.gxblk.com" Größe="30" Verwendungszweck="this.focus();this.select();">

Im Code bettet das Eingabe-Tag eine JS-Anweisung für das Ereignis onmousemove (Mauszeiger bewegt sich) ein. Das this.focus() nach dem Gleichheitszeichen bedeutet, dass es den Fokus erhält. Das Zeichen dafür, dass der Fokus erhalten wird, ist, dass der Eingabecursor im Textfeld erscheint, aber um den gesamten Text darin auszuwählen, müssen wir die Anweisung this.select() verwenden, was bedeutet, dass der gesamte Text im Textfeld ausgewählt wird.

2. Onblur (Ereignis mit Fokusverlust)

Wir prüfen häufig, ob das Textfeld richtig ausgefüllt wurde. Die Erkennung wird normalerweise durchgeführt, nachdem der Benutzer auf die Schaltfläche „Senden“ geklickt hat. Wenn das Steuerelement den Fokus verliert, können wir diese Erkennung tatsächlich in Echtzeit durchführen. In diesem Fall ist das Ereignis „onblur“ praktisch.

Das folgende Beispiel enthält vier Textfelder. Wenn Sie keines davon angeklickt haben, passiert nichts. Wenn Sie jedoch auf eines davon klicken, um ihm den Fokus zu geben (der Eingabecursor befindet sich darin), aber nichts eingegeben wurde und Sie irgendwo anders klicken, um den Fokus zu verlieren, wird eine Warnung angezeigt. Probieren Sie es aus.

Name

Geschlecht

Alter

Adresse

Hier ist der Code und die Erklärung:

Formularcode

<form name="unschärfetest">

   <p>Name<input type="text" name="name"value="" size="30"οnblur="chkvalue(this)"><br>

    Geschlecht<inputtype="text" name="sex" value=""size="30" οnblur="chkvalue(this)"><br>

    Alter<inputtype="text" name="age" value=""size="30" οnblur="chkvalue(this)"><br>

    Adresse<inputtype="text" name="addr" value=""size="30" οnblur="chkvalue(this)"></p>

</form>

JS-Code

<scriptlanguage="javascript">
Funktion chkvalue(txt) {
   if(txt.value=="") alert("Das Textfeld muss ausgefüllt werden!");

}
</Skript>

Im Formularcode ist in jeden Boxcode eine Onblur-JS-Anweisung eingebettet, die im folgenden JS-Code die benutzerdefinierte Funktion chkvalue(this) aufruft. Dies bedeutet, dass die Funktion chkvalue() aufgerufen wird, wenn das Textfeld den Fokus verliert. Diese Funktion chkvalue() erkennt, ob das Textfeld leer ist, und öffnet in diesem Fall ein Warnfenster. Diese Funktion hat einen Parameter (txt), der dem Parameter (this) entspricht, der vom vorherigen Textfeld zum Aufrufen der Funktion verwendet wurde, also dem Parameter selbst.

Dies ist das Ende dieses Artikels mit der detaillierten Erklärung der JavaScript-Onblur- und Onfocus-Ereignisse. Weitere relevante Inhalte zu JS-Onblur- und Onfocus-Ereignissen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!