Js erzeugt den Effekt, dass der Standardtext verschwindet, wenn auf das Eingabefeld geklickt wird_Text-Spezialeffekte

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>

Mit diesem Code können ihn die meisten Browser unterstützen.

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>

debc0d1293c83d3acca7cd66c3fbb9d0Wir werden Ihre Vorschläge sorgfältig berücksichtigen Vorschläge; wir werden uns Ihre Kritik aufmerksam anhören; bitte beschreiben Sie Ihre Vorschläge oder aufgetretenen Probleme im Detail. 40587128eee8df8f03d0b607fe983014

Die oben genannten drei Effekte sind relativ einfache Javascript-Anwendungen.