Stil-Trigger-Effekt des Webseiten-Eingabefelds

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

>>:  Tutorial zur Ein-Klick-Installation von Docker und Docker-Compose (unterstützt online und offline)

Artikel empfehlen

Installieren Sie mysql5.7.17 mit RPM unter Linux

Die Installationsmethode von MySQL5.7 rpm unter L...

HTML Einführungstutorial HTML Tag Symbole schnell beherrschen

Randbemerkung <br />Wenn Sie nichts über HTM...

Fallstudie zur Implementierung eines jQuery Ajax-Chatbots

Chatbots können viel manuelle Arbeit sparen und i...

Einige Fehler, die JavaScript-Anfänger häufig machen

Inhaltsverzeichnis Vorwort Verwechslung von „unde...

Einfaches Beispiel für die Leistungsoptimierung von MySQL-SQL-Anweisungen

Einfaches Beispiel für die Leistungsoptimierung v...

Vue implementiert Karussell-Animation

In diesem Artikelbeispiel wird der spezifische Co...

So wenden Sie TypeScript-Klassen in Vue-Projekten an

Inhaltsverzeichnis 1. Einleitung 2. Verwendung 1....

Nginx-Signalsteuerung

Einführung in Nginx Nginx ist ein leistungsstarke...

Leitfaden zum Schreiben von HTML-Code

Gängige Konventions-Tags Selbstschließende Tags, ...

Implementierung der Validierung mehrerer Elemente im Formular

Im Projekt werden häufig Formulartests durchgefüh...

Implementierung der privaten Docker-Bibliothek

Die Installation und Bereitstellung eines private...