So optimieren Sie das HTML-Eingabefeld

Dieses Mal zeige ich Ihnen, wie Sie das HTML-Eingabefeld optimieren. Was sind die Vorsichtsmaßnahmen für die Optimierung des HTML-Eingabefelds?

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 kurzes Stück 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>

Der wichtigste Teil dieses Codes ist der Onfocus-Teil Wenn Sie onfocus verwenden, können Sie mit onclick auch den gleichen Effekt erzielen, z. B. onfocus = „this.select ()“.

2. Ändern Sie die Rahmenfarbe oder Hintergrundfarbe, wenn sich die Maus über dem Eingabefeld befindet

Es gibt zwei Methoden für diesen Effekt: Methode eins besteht darin, das Pseudoelement in CSS zu verwenden: Fokus ; Methode zwei verwendet immer noch ein kurzes Stück Javascript; Der HTML-Code von Methode 1 ist derselbe wie im obigen Beispiel, außer dass der folgende Abschnitt zum CSS hinzugefügt wurde:

input:hover { border:1px solid #F00; }

Wann Wenn Sie mit der Maus über das Eingabefeld fahren, wird der Rand des Eingabefelds rot. Diese Methode ist jedoch nur im Firefox-Browser und IE7 oder höher gültig und wird von IE6 nicht unterstützt, sodass bestimmte Einschränkungen bestehen. Der Code von Methode zwei ist größtenteils derselbe wie im obigen Beispiel, außer dass am Ende ein Abschnitt mit Maus-Hover-Code 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=&#39;#FF6600&#39;" onmouseout="this.style.borderColor=&#39;&#39;" /> 
</form>

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

3. Klicken Sie auf das Eingabefeld und der Standardtext verschwindet

Es gibt einen weiteren Effekt, wenn die Maus auf das Eingabefeld klickt. 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 Javascript-Urteils erzielt 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=&#39;#FF6600&#39;" onmouseout="this.style.borderColor=&#39;&#39;" onFocus="if (value ==&#39;Dreamweaver&#39;){value =&#39;&#39;}" onBlur="if (value ==&#39;&#39;){value=&#39;Dreamweaver&#39;}"/> 
</form>

In HTML5 können Sie das Platzhalterattribut der Eingabe direkt verwenden:

<input type="search" name="user_search" placeholder="Search W3School" />

The Die oben genannten drei Effekte sind alle relativ einfache Javascript-Anwendungen. Obwohl sie über den Rahmen von HTML-Code hinausgehen, bringt ihre Beherrschung HTML-Anwendungen und die Erstellung von Webseiten mit sich. Daher ist es bei Bedarf auch erforderlich, etwas einfaches Javascript zu beherrschen.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So lösen Sie das Problem, wenn das Formular automatisch gesendet wird und zu anderen Seiten springt, nachdem Sie auf der Webseite die Eingabetaste gedrückt haben

So kann die Breite der Tabelle festgelegt werden: Tabellenlayout: festgelegt

Das obige ist der detaillierte Inhalt vonSo optimieren Sie das HTML-Eingabefeld. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!