Onblur- und Onfocus-Ereignisse in Js (grafisches Tutorial)

In HTML-Seiten verfügen visuelle Elemente wie Schaltflächen und Textfelder über Ereignisse, die den Fokus haben und verlieren. Diese Ereignisse können als Reaktion auf Maus- oder Tastaturaktionen voreingestellte Vorgänge auslösen. In diesem Artikel wird das Erhöhen und Verlieren des Fokus eines Textfelds als Beispiel verwendet, um kurz die Anwendung von Onfocus und Onblur zu erläutern.

1. onfocus (Fokusereignis)

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

Wenn sich der Mauszeiger über das folgende Textfeld bewegt, ist der gesamte Text darin ausgewählt:

Bitte geben Sie die URL ein

Wie geht das? Schauen Sie sich den folgenden Code und die Erklärung an:

<input type="text"name="url" value="http://www.gxblk.com" size="30"onmousemove="this.focus();this.select();">

Im Code ist die JS-Anweisung des Ereignisses onmousemove (Mauszeigerübergabe) in das Eingabe-Tag eingebettet. Das bedeutet this.focus() nach dem Gleichheitszeichen es erhält den Fokus; get Das Zeichen des Fokus 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 ausgewählt wird Text in das Textfeld ein.

2. Onblur (Fokusverlustereignis)

Wir erkennen häufig, ob das Textfeld korrekt eingegeben wurde, nachdem der Benutzer auf die Schaltfläche „Senden“ geklickt hat Wenn der Fokus verloren geht, können wir diese Erkennungsarbeit in Echtzeit durchführen. In diesem Fall ist das Onblur-Ereignis hilfreich.

Das folgende Beispiel enthält vier Textfelder, auf die nicht geklickt wird. Wenn Sie jedoch auf eines davon klicken, bleibt der Fokus erhalten Wenn Sie nichts eingeben und auf eine andere Stelle klicken, wird eine Warnung angezeigt. Versuchen Sie es mit

Name

Geschlecht

Alter

Adresse

Das Folgende ist der Code und die Erklärung:

Formularcode

<form name="blur_test">
   <p>姓名 <input type="text" name="name"value="" size="30"onblur="chkvalue(this)"><br>
    性别 <inputtype="text" name="sex" value=""size="30" onblur="chkvalue(this)"><br>
    年龄 <inputtype="text" name="age" value=""size="30" onblur="chkvalue(this)"><br>
    住址 <inputtype="text" name="addr" value=""size="30" onblur="chkvalue(this)"></p>
</form>

JS-Code

<scriptlanguage="javascript">
function chkvalue(txt) {
   if(txt.value=="") alert("文本框里必须填写内容!");
}
</script>

Formularcode Hier der Code von jedem Das Feld ist mit einer onblur-JS-Anweisung eingebettet und alle rufen im folgenden JS-Code die benutzerdefinierte Funktion chkvalue(this) auf. Dies bedeutet, dass die Funktion chkvalue() aufgerufen wird, wenn das Textfeld den Fokus verliert ob das Textfeld leer ist, und wenn ja, erscheint ein Warnfenster. Diese Funktion verfügt über einen Parameter (txt), der dem Parameter (this) entspricht, der vom vorherigen Textfeld zum Aufrufen der Funktion verwendet wurde, nämlich sich selbst.

Das Obige habe ich für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Detaillierte Code-Erklärung, wie JavaScript die schnelle Sortierung implementiert

Wie JavaScript die Blasensortierung in einem gekapselten Code implementiert Art und Weise

Detaillierte Erläuterung des JavaScript-Betriebsmechanismus und konzeptionelle Analyse

Das obige ist der detaillierte Inhalt vonOnblur- und Onfocus-Ereignisse in Js (grafisches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!