Optimierung des HTML-Eingabefelds zur Verbesserung des Benutzererlebnisses und der Benutzerfreundlichkeit
|
Um das Benutzererlebnis und die Benutzerfreundlichkeit zu verbessern, optimieren einige Designer Dinge, die Benutzer auf Webseiten häufig verwenden, wie beispielsweise Eingabefelder. Wie werden allgemeine Eingabefelder optimiert? Aus Sicht der Benutzererfahrung verbessert die Vereinfachung der Benutzerschritte und die bequemere Nutzung für Benutzer die Benutzerfreundlichkeit. Wenn beispielsweise die Maus über das Eingabefeld bewegt wird, ändert sich die Farbe des Eingabefelds, der Standardtext im Eingabefeld wird automatisch ausgewählt oder der Standardinhalt wird automatisch gelöscht, wenn auf das Eingabefeld geklickt wird usw. Dieser Effekt klingt kompliziert, ist aber eigentlich ganz einfach zu erzielen. Er lässt sich mit nur einem kleinen Stück JavaScript-Code lösen. Hier sind einige Codes für einige Effekte. 1. Klicken Sie auf das Eingabefeld, um den HTML-Code des Inhalts auszuwählen: Code kopieren Der Code lautet wie folgt:<form id="form1" name="form1" method="post" action=""> <label for="textfield">Inhalt eingeben:</label> <input name="textfield" type="text" id="textfield" value="Dreamweaver" onfocus="this.select()" /> </form> Der wichtigste Teil dieses Codes ist onfocus. Wenn Sie onfocus nicht verwenden, können Sie auch onclick verwenden, um denselben Effekt zu erzielen, z. B. onfocus="this.select()". 2. Ändern Sie die Rahmenfarbe oder Hintergrundfarbe, wenn die Maus über das Eingabefeld bewegt wird Es gibt zwei Möglichkeiten, diesen Effekt zu erzielen: Methode 1 besteht darin, das Pseudoelement :focus in CSS zu verwenden; Methode 2 besteht darin, ein kleines Stück JavaScript zu verwenden. Der HTML-Code für Methode 1 ist derselbe wie im obigen Beispiel, außer dass der CSS der folgende Abschnitt hinzugefügt wird: Code kopieren Der Code lautet wie folgt:Eingabe: schweben { Rahmen: 1px durchgezogen #F00; } Wenn Sie mit der Maus über das Eingabefeld fahren, wird der Rand des Eingabefelds rot. Diese Methode ist jedoch nur im Firefox-Browser und in IE7 und höher gültig. IE6 unterstützt sie nicht und unterliegt daher gewissen Einschränkungen. Der größte Teil des Codes für Methode 2 ist derselbe wie im obigen Beispiel, außer dass am Ende ein Abschnitt mit Mouseover-Code hinzugefügt wird: Code kopieren Der Code lautet wie folgt:<form id="form1" name="form1" method="post" action=""> <label for="textfield">Inhalt eingeben:</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 die meisten Browser ihn unterstützen. 3. Klicken Sie auf das Eingabefeld und der Standardtext verschwindet Und es gibt noch einen weiteren Effekt: Wenn man mit der Maus auf das Eingabefeld klickt, verschwindet der ursprüngliche Standardtext. Wenn Sie andere neue Inhalte eingeben und anschließend die Maus wegbewegen, bleibt der neue Inhalt im Eingabefeld unverändert, geben Sie keine neuen Inhalte ein, wird beim Verlassen des Eingabefelds mit der Maus der Standardtext wiederhergestellt. Dieser Effekt kann durch das Hinzufügen eines kleinen Javascript-Stücks erreicht werden: Code kopieren Der Code lautet wie folgt:<form id="form1" name="form1" method="post" action=""> <label for="textfield">Inhalt eingeben:</label> <input name="textfield" type="text" id="textfield" value="Dreamweaver" onmouseover="this.style.borderColor='#FF6600'" onmouseout="this.style.borderColor=''" onFocus="wenn (value =='Dreamweaver'){value =''}" onBlur="wenn (value ==''){value='Dreamweaver'}"/> </form> In HTML5 können Sie das Platzhalterattribut der Eingabe direkt verwenden: Code kopieren Der Code lautet wie folgt:<input type="search" name="user_search" placeholder="W3School durchsuchen" /> Die oben genannten drei Effekte sind relativ einfache JavaScript-Anwendungen. Obwohl sie den Umfang von HTML-Code überschritten haben, wird ihre Beherrschung die Erstellung von HTML-Anwendungen und Webseiten erheblich vereinfachen. Daher ist es bei Bedarf auch erforderlich, einige einfache JavaScript-Funktionen zu beherrschen. |
<<: Vue-Tutorial zur erweiterten Verwendung dynamischer Komponenten
Artikel empfehlen
Einführung in die Installation von JDK unter Linux, einschließlich der Deinstallation von OpenJDK
1. OpenJDK anzeigen rpm -qa|grep jdk 2. Löschen S...
Implementieren Sie eine einfache Suchmaschine auf Basis von MySQL
Inhaltsverzeichnis Implementierung einer Suchmasc...
Markup-Validierung für Doctype
Aber vor kurzem habe ich festgestellt, dass die Ve...
So melden Sie sich unter Shell schnell ohne Kennwort bei der MySQL-Datenbank an
Hintergrund Wenn wir uns über den MySQL-Client in...
Implementierung der Docker-Bereitstellung von Django+Mysql+Redis+Gunicorn+Nginx
I. Einleitung Die Docker-Technologie erfreut sich...
So schreiben Sie schönen HTML-Code
So sieht schöner HTML-Code aus. So schreiben Sie ...
Analysieren Sie die Rolle von rel="nofollow" in HTML und die Verwendung des rel-Attributs
Durch das Hinzufügen des Attributs rel="nofo...
CSS-Ansichtsfenstereinheiten für schnelles Layout
CSS-Viewport-Einheiten gibt es schon seit einigen...
Beispielcode zur Implementierung eines Radardiagramms mit vue+antv
1. Abhängigkeit herunterladen npm installiere @an...
JS implementiert die zufällige Generierung von Bestätigungscodes
In diesem Artikelbeispiel wird der spezifische JS...
Automatischer Commit-Vorgang für MySQL-Transaktionen
Der Standardbetriebsmodus von MySQL ist der Autoc...
Implementierung der Leistungsoptimierung des Element-Shuttle-Frames
Inhaltsverzeichnis Hintergrund Lösung Neue Fragen...
mysql erhält das gestrige Datum, das heutige Datum, das morgige Datum und die Uhrzeit der vorherigen und der nächsten Stunde
1. Aktuelles Datum wählen Sie DATE_SUB(curdate(),...
Über Tomcat kombiniert mit Atomikos zur Implementierung von JTA
Vor Kurzem hat das Projekt die Umgebung gewechsel...
Vue implementiert das Hinzufügen von Wasserzeichen zu hochgeladenen Bildern
In diesem Artikel wird der spezifische Implementi...