Optimierung des HTML-Eingabefelds zur Verbesserung der Benutzererfahrung und Benutzerfreundlichkeit. Detaillierte Einführung

Designer optimieren Dinge, die Benutzer häufig auf Webseiten verwenden, wie zum Beispiel Eingabefelder. Wie werden allgemeine Eingabefelder optimiert? Wenn sich die Maus beispielsweise über dem Eingabefeld befindet, ändert sich die Farbe des Eingabefelds und der Standardtext im Eingabefeld wird automatisch ausgewählt. Um das Benutzererlebnis und die Benutzerfreundlichkeit zu verbessern, optimieren einige Designer Dinge, die Benutzer häufig auf Webseiten verwenden, beispielsweise 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:

Der Code lautet wie folgt:

<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>

Am meisten Ein wichtiger Teil dieses Codes ist: Wenn onfocus im onfocus-Teil nicht verwendet wird, kann der gleiche Effekt durch die Verwendung von onclick erzielt werden, 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 eins ist derselbe wie im obigen Beispiel, außer dass der folgende Abschnitt zum CSS hinzugefügt wurde:

Der Der Code lautet wie folgt:

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

Wenn sich die Maus über dem Eingabefeld befindet, wird der Rand des Eingabefelds rot. Diese Methode ist jedoch nur im Firefox-Browser und IE7 gültig IE6 unterstützt es nicht, daher gibt es bestimmte Einschränkungen. Der Code von Methode zwei ist größtenteils derselbe wie im obigen Beispiel, außer dass am Ende ein Abschnitt mit Mauszeigercode hinzugefügt wird:

Der Code lautet wie folgt:

<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 Hinzufügen einer kurzen JavaScript-Beurteilung erzielt werden:

Der Code lautet wie folgt:

<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 kann das Platzhalterattribut der Eingabe erfolgen direkt verwendet werden:

Der Code lautet wie folgt:

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

Die oben genannten drei Effekte sind relativ einfache Javascript-Anwendungen, obwohl sie über den Rahmen von HTML hinausgehen Code, die Beherrschung ihrer Auswirkungen auf HTML-Anwendungen und die Erstellung von Webseiten bringen großen Komfort mit sich. Daher ist es bei Bedarf erforderlich, etwas einfaches Javascript zu beherrschen.

Weitere Optimierungen für HTML-Eingabefelder zur Verbesserung der Benutzererfahrung und Benutzerfreundlichkeit finden Sie auf der chinesischen PHP-Website mit detaillierten verwandten Artikeln!