Stil-Trigger-Effekt des Webseiten-Eingabefelds
|
<br />Dieses Beispiel untersucht hauptsächlich zwei Parameter, onblur und onFocus. Da diese beiden Parameter zuvor selten vorkamen, hat Baidu sofort verstanden, dass onblur ein Ereignis ist, das ausgelöst wird, wenn das Steuerelement den Fokus verliert, und onFocus ein Ereignis ist, das ausgelöst wird, wenn es zum Eingabefokus wird. Diese beiden Parameter können mit className kombiniert werden, um den Stylesheet-Klassennamen direkt aufzurufen. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <Kopf> <meta http-equiv="Inhaltstyp" content="text/html; charset=gb2312"> <Titel></Titel> </Kopf> <Text> <style type="text/css"> .Eingabe1{ Schriftfamilie: Verdana; Hintergrundfarbe: #EEEEEE; Rahmen unten: #FFFFFF 1px durchgezogen; Rahmen links: #CCCCCC 1px durchgezogen; Rahmen rechts: #FFFFFF 1px durchgezogen; Rahmen oben: #CCCCCC 1px durchgezogen; Schriftgröße: 12px; } .input1-bor { Schriftfamilie: Verdana; Hintergrundfarbe: #F0F8FF; Schriftgröße: 12px; Rand: 1px durchgezogen #333333;} </Stil> <Tabelle Zellenabstand=2 Zellenpadding=0 Breite=300 Rahmen=0> <tr> <td><font class="en1">Name:</font> </td> <td><Eingabegröße=40 Name=Name Klasse="Eingabe1" onblur="dieser.Klassenname='Eingabe1'" onfocus="dieser.Klassenname='Eingabe1-bor'"> </td> </tr> <tr> <td><font class="en1">E-Mail:</font></td> <td><Eingabegröße=40 Name=E-Mail Klasse="Eingabe1" onblur="this.className='Eingabe1'" onfocus="this.className='Eingabe1-bor'"></td> </tr> <tr> <td><font class="en1">Website:</font> </td> <td><Eingabegröße=40 Name=URL Klasse="Eingabe1" onblur="diese.Klassenname='Eingabe1'" onfocus="diese.Klassenname='Eingabe1-bor'"> </td> </tr> <tr> <td><font class="en1">Thema:</font> </td> <td><Eingabegröße=40 Name=Betreff Klasse="Eingabe1" onblur="this.className='Eingabe1'" onfocus="this.className='Eingabe1-bor'"> </td> </tr> <tr> <td><font class="en1">Inhalt: </font> </td> <td><textarea Name=Nachricht Zeilen=5 Spalten=35 Klasse="input1" onblur="this.className='input1'" onfocus="this.className='input1-bor'"></textarea></td></tr></table> </body> </html> |
<<: Detaillierte Erläuterung der Live-Übertragungsfunktion von Vue
Artikel empfehlen
Beispielcode für ein großes Dropdown-Menü, implementiert in reinem CSS
Dies ist ein großes Dropdown-Menü, das rein in CS...
CSS3 realisiert den grafischen Fallanimationseffekt
Sehen Sie zuerst den Effekt Implementierungscode ...
MySQL-Transaktionsdetails
Inhaltsverzeichnis Einführung Vier Merkmale von T...
50 superpraktische Tools für Webdesigner
Webdesigner zu sein ist nicht einfach. Sie müssen...
Lösung für den internen Serverfehler Nginx 500
Als ich heute Nginx verwendete, trat ein 500-Fehl...
Verwenden Sie das ab-Tool, um einen API-Stresstest auf dem Server durchzuführen
Inhaltsverzeichnis 1 Eine kurze Einführung in den...
isPrototypeOf-Funktion in JavaScript
Inhaltsverzeichnis 1. istPrototyp von() Beispiel ...
JavaScript-Programmierung durch Lernen der Positionierung des Schwerpunktalgorithmus in Matlab
Inhaltsverzeichnis Matlab-Centroid-Algorithmus Da...
So stellen Sie Redis schnell als Docker-Container bereit
Inhaltsverzeichnis Erste Schritte Datenspeicherun...
Welche Schleife ist in JavaScript die schnellste?
Wenn wir wissen, welche For-Schleife oder welcher...
MySQL-Methode und Beispiel für langsame Abfragen
1. Einleitung Durch Aktivieren des Slow Query Log...
Detaillierte Erklärung von Softlinks und Hardlinks in Linux
Inhaltsverzeichnis 1. Grundlegende Speicherung vo...
So ersetzen Sie alle Tags im HTML-Text
(?i) bedeutet, dass die Groß-/Kleinschreibung nich...
Der Unterschied zwischen this.$router und this.$route in Vue und der push()-Methode
Im offiziellen Dokument heißt es: Durch Einfügen ...
Welche magischen Anwendungen haben CSS-Filter?
Hintergrund Grundlegende Konzepte CSS filter wend...