Detaillierte Erklärung der HTML-Ereignisse „onfocus gain focus“ und „onblur lose focus“

HTML-Onfocus-Ereignisattribute

Definition und Verwendung

Das Onfocus-Attribut wird ausgelöst, wenn ein Element den Fokus erhält.

onfocus wird häufig für <input>, <select> und <a> verwendet.

Tipp: Das Attribut „onfocus“ ist das Gegenteil des Attributs „onblur“.

Hinweis: Das Attribut onfocus gilt nicht für die folgenden Elemente: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> oder <title>.

Beispiele

Löst eine Funktion aus, wenn das Eingabefeld den Fokus erhält. Diese Funktion ändert die Hintergrundfarbe des Eingabefeldes

<Skript>
Funktion setStyle(x)
{
document.getElementById(x).style.background="gelb";
}
</Skript>
</Kopf>
<Text>
 
<p>Funktion wird ausgelöst, wenn das Eingabefeld den Fokus erhält. Diese Funktion ändert die Hintergrundfarbe des Eingabefeldes. </p>
 
Vorname: <input type="text" id="fname" onfocus="setStyle(this.id)"><br>
Nachname: <input type="text" id="lname" onfocus="setStyle(this.id)">
 
</body>

HTML-Onblur-Ereignisattribute

Definition und Verwendung

Das Onblur-Attribut wird ausgelöst, wenn das Element den Fokus verliert.

onblur wird häufig im Formularvalidierungscode verwendet (z. B. wenn ein Benutzer ein Formularfeld verlässt).

Beispiele

Validieren Sie das Eingabefeld, wenn der Benutzer es verlässt:

<Skript>
Funktion Großbuchstaben()
{
var x = document.getElementById("fname").Wert
document.getElementById("fname").value=x.toUpperCase()
}
</Skript>
</Kopf>
<Text>
 
<p>Bitte geben Sie Ihren Namen ein und verschieben Sie den Fokus außerhalb des Feldes:</p>
Bitte geben Sie Ihren Namen ein (in englischen Zeichen): <input type="text" name="fname" id="fname" onblur="upperCase()">
 
</body>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<: mysql teilt eine Datenzeile basierend auf Kommas in mehrere Zeilen auf

>>: Was ist SSH-Portweiterleitung? Was nützt das?

Einige Vorschläge zur Linux-Systemoptimierung (Kerneloptimierung)

Detaillierte Erklärung der HTML-Ereignisse „onfocus gain focus“ und „onblur lose focus“

Einige Vorschläge zur Linux-Systemoptimierung (Kerneloptimierung)

Zusammenfassung zur Anwendung dekorativer Elemente im Webdesign

Eine kurze Diskussion über ereignisgesteuerte Entwicklung in JS und Nodejs

Beispiel für die Verwendung der setInterval-Funktion in React

So beheben Sie den Verbindungsfehler zur Datenbank beim Start von ServerManager

Detailliertes Tutorial zur Installation eines PXC-Clusters mit Docker

Zusammenfassung und ausführliche Erläuterung der Docker-Container-Bedienungsanleitung

Detaillierte Erklärung zur Verwendung des <meta>-Tags in HTML

So zeigen Sie den Rahmen an, wenn td leer ist

JavaScript-Implementierung von Lupendetails

Artikel empfehlen

Beispielcode zur Installation von Jenkins mit Docker

Implementierung der Einbindung eines freigegebenen NFS-Verzeichnisses in einen Docker-Container

Sammlung von 25 Schriftarten, die in berühmten Website-Logos verwendet werden

mysql 5.7.18 winx64 Passwort ändern

So erstellen Sie einen MySQL PXC-Cluster

Vue implementiert das Hinzufügen von Wasserzeichen zu hochgeladenen Bildern

Die Verwendung von FrameLayout in sechs Layouts

Vue-pdf implementiert eine Online-Vorschau von PDF-Dateien

Lösung für das Problem, dass MySQL nach dem Ändern des Standardpfads der Datenbank nicht gestartet werden kann

MySQL Serie 13 MySQL-Replikation

Mysql-Trigger werden in PHP-Projekten zum Sichern, Wiederherstellen und Löschen von Informationen verwendet

Vue hält den Benutzer angemeldet (verschiedene Token-Speichermethoden)

MySQL 5.7.18 Green Edition Download- und Installations-Tutorial

Fünf Möglichkeiten zur Implementierung der Vererbung in js

Lösung für die Willkommensmeldung im Notfallmodus beim Booten von CentOS7.4