Um das Benutzererlebnis und die Benutzerfreundlichkeit zu verbessern, optimieren einige Designer Dinge, die Benutzer häufig auf Webseiten verwenden, wie z. B. Eingabefelder. Wie werden allgemeine Eingabefelder optimiert? Aus Sicht des Benutzererlebnisses verbessert die Vereinfachung der Benutzerschritte und die Benutzerfreundlichkeit die Benutzerfreundlichkeit. Beispielsweise wird die Farbe des Eingabefelds geändert, wenn sich die Maus über dem Eingabefeld befindet, wodurch automatisch der Standardtext im Eingabefeld ausgewählt wird , oder klicken Sie, um den Standardinhalt beim Öffnen des Felds automatisch zu löschen usw. Dieser Effekt klingt kompliziert, ist aber eigentlich sehr einfach. Es ist nur ein kurzer JavaScript-Code erforderlich, um ihn zu lösen. Im Folgenden werden die Codes für verschiedene Effekte vorgestellt:
1. Klicken Sie auf das Eingabefeld, um den HTML-Code des Inhalts auszuwählen:
<form id="form1" name="form1" method="post" action=""> <label for="textfield">输入内容：</label> <input name="textfield" type="text" id="textfield" value="Dreamweaver"onfocus="this.select()" /> </form>
2. Ändern Sie die Rahmenfarbe oder Hintergrundfarbe, wenn sich die Maus über dem Eingabefeld befindet
Für diesen Effekt gibt es zwei Methoden: Methode eins besteht darin, das Pseudoelement in CSS zu verwenden; Methode zwei besteht immer noch darin, ein kleines Stück Javascript zu verwenden; Methode eins ist derselbe wie im obigen Beispiel, außer dass Der folgende Absatz wird dem CSS hinzugefügt:
input:hover { border:1px solid #F00;
Wenn Sie mit der Maus über das Eingabefeld fahren, wird der Rand des Eingabefelds rot. Diese Methode ist jedoch nur im Firefox-Browser gültig und wird von IE7 oder höher nicht unterstützt. Daher gibt es bestimmte Einschränkungen. Der Code für Methode zwei ist größtenteils derselbe wie im obigen Beispiel, außer dass am Ende ein Abschnitt mit Mauszeigercode hinzugefügt wird:
<form id="form1" name="form1" method="post" action=""> <label for="textfield">输入内容：</label> <input name="textfield" type="text" id="textfield" value="Dreamweaver"onfocus="this.select()"onmouseover="this.style.borderColor='#FF6600'" onmouseout="this.style.borderColor=''" /> </form>
3. Klicken Sie auf das Eingabefeld und der Standardtext verschwindet
Es gibt auch den Effekt, dass bei einem Mausklick auf das Eingabefeld der ursprüngliche Standardtext verschwindet. Wenn Sie andere neue Inhalte eingeben und dann die Maus wegbewegen, bleibt der neue Inhalt des Eingabefelds unverändert; wenn Sie keinen neuen Inhalt eingeben, verlässt die Maus das Eingabefeld und der Standardtext wird wiederhergestellt. Dieser Effekt kann durch einfaches Hinzufügen eines kurzen Abschnitts Javascript erreicht werden:
<form id="form1" name="form1" method="post" action="">
<label for="textfield">输入内容：</label>
<input name="textfield" type="text" id="textfield" value="Dreamweaver" onmouseover="this.style.borderColor='#FF6600'" onmouseout="this.style.borderColor=''" onFocus="if (value =='Dreamweaver'){value =''}" onBlur="if (value ==''){value='Dreamweaver'}"/>
</form>
Die oben genannten drei Effekte sind relativ einfache Javascript-Anwendungen.
