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?
Artikel empfehlen
Zusammenfassung der Erfahrungen mit der browserübergreifenden Entwicklung (I) HTML-Tags
Fügen Sie der Seite einen DOCTYPE hinzu Da versch...
Zusammenfassung der Spring Boot Docker-Verpackungstools
Inhaltsverzeichnis Spring Boot Docker Spring-Boot...
Konfigurationscodebeispiel für Nginx-Forward- und Reverse-Proxy sowie Lastausgleichsfunktionen
In diesem Artikel werden hauptsächlich die Konfig...
Vue echarts realisiert die dynamische Anzeige von Balkendiagrammen
In diesem Artikel wird der spezifische Code von V...
So erstellen Sie Ihre erste React-Seite
Inhaltsverzeichnis Was ist Rract? Hintergrund Rea...
Rendern im Vue-Scaffolding verstehen
Im Vue-Gerüst können wir sehen, dass im neuen Vue...
Problem mit dem Timeout der Zookeeper-Anforderung in Dubbo: Konfiguration der Verbindung von Mybatis+Spring mit MySQL8.0.15
Ich werde in diesen zwei Tagen Java wiederholen, ...
Beispiel für die Implementierung eines hohlen Dreieckpfeils und eines X-Symbols mit anschließendem Pseudoelement
Im Frontend-Designentwurf sieht man oft Schließen...
Der derzeit bessere Weg, eine Auswahlliste mit allen Optionen zu erstellen, wenn diese ausgewählt/fokussiert sind
Während der Entwicklung bin ich auf eine solche An...
Detailliertes Tutorial zur Installation des Tomcat-Servers und zur Konfiguration von Umgebungsvariablen unter Win10 (Bild und Text)
Inhaltsverzeichnis Herunterladen und Installieren...
MySQL MSI-Version herunterladen und installieren - ausführliches grafisches Tutorial für Anfänger
Inhaltsverzeichnis 1. Laden Sie die MySQL-MSI-Ver...
CocosCreator Universal Framework Design Network
Inhaltsverzeichnis Vorwort WebSocket verwenden Er...
Tutorial zur Neuinstallation von MySQL unter Windows 64-Bit (Zip-Version, dekomprimierte Version der MySQL-Installation)
Deinstallieren von MySQL 1. Deinstallieren Sie in...
Auszeichnungssprache - Titel
Klicken Sie hier, um zum Abschnitt „HTML-Tutorial“...
So verwenden Sie das href-Attribut des HTML-Tags a, um relative und absolute Pfade anzugeben
Bei der tatsächlichen Webentwicklung ist für das ...