Optimierung des HTML-Eingabefelds zur Verbesserung der Benutzererfahrung und Benutzerfreundlichkeit_HTML/Xhtml_Webseitenerstellung

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

Kopieren Sie den Code

Der Code lautet wie folgt:

">Eingabeinhalt:< /label>

Der wichtigste Teil dieses Codes ist der onfocus-Teil. Wenn onfocus nicht verwendet wird, kann der gleiche Effekt durch die Verwendung von onclick erzielt werden, z. B. onfocus="this .wählen()".

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 Absatz zum CSS hinzugefügt wurde:

Code kopierenDer 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 oder höher gültig und wird von IE6 nicht unterstützt, sodass bestimmte Einschränkungen bestehen. 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:

Code kopieren Der Code lautet wie folgt:

;label for= "textfield">Eingabeinhalt:

Verwenden Sie dies Code, groß Die meisten Browser können es 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-Stücks zur Beurteilung erzielt werden:

Kopieren Sie den CodeDer Code ist wie folgt folgt:

Inhalt eingeben :



Das Platzhalterattribut der Eingabe kann direkt in HTML5 verwendet werden:

Code kopieren Der Code lautet wie folgt:

Die oben genannten drei Effekte sind Vergleiche. Obwohl einfache Javascript-Anwendungen über den Rahmen von HTML-Code hinausgegangen sind, bringt ihre Beherrschung HTML-Anwendungen und die Erstellung von Webseiten großen Komfort. Daher ist es bei Bedarf erforderlich, etwas einfaches Javascript zu beherrschen.