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
So fügen Sie bedingte Ausdrücke zu Aggregatfunktionen in MySql hinzu
MySQL-Filterungs-Timing von Where-Bedingungen und...
JS implementiert das Schlangenspiel
Inhaltsverzeichnis 1. Initialisierungsstruktur 2....
Zeigen Sie die vom Prozess in Linux belegte Portnummer an
Für Linux-Systemadministratoren ist es von entsch...
Mehrere Methoden zur Implementierung von Karussellbildern in JS
Karussell Die Grundidee ist: Im großen Container ...
CSS zum Erzielen des Like-Card-Effekts in der unteren rechten Ecke der Webseite (Beispielcode)
Wirkung Um HTML zu implementieren, bereiten Sie z...
Verwenden Sie Python, um mithilfe des Moduls pymysql eine Verbindung zur MySQL-Datenbank herzustellen
Installieren Sie pymysql pip install pymysql 2|0V...
Implementierung zum Hinzufügen von Bemerkungsinformationen zu MySQL
Vorwort Einige Leute haben mich in diesen Tagen u...
HTML+CSS zum Erstellen eines geschichteten Pyramidenbeispiels
Dieser Artikel stellt hauptsächlich das Beispiel ...
Ausführliches Tutorial zur Installation von mysql 5.6.23 winx64.zip
Eine ausführliche Dokumentation zur Installation ...
Implementierung neuer Probleme mit CSS3-Selektoren
Inhaltsverzeichnis Grundlegende Selektorerweiteru...
Wie stellt MySQL die Master-Slave-Konsistenz sicher?
Inhaltsverzeichnis Das Grundprinzip von MySQL Mas...
Eine kurze Analyse des Kimono-Memo-Problems
Heute musste ich nach dem Neustart des Spiels fes...
Detaillierte Erläuterung zur Verwendung von Node.js zum Implementieren einer Hot-Reload-Seite
Vorwort Vor nicht allzu langer Zeit habe ich Brow...
Verbessern Sie die Effizienz der Seitencodeänderung und beherrschen Sie die Kernkenntnisse der HTML-Sprache
Beim Erstellen einer Website scheint die HTML-Spra...
Eine kurze Analyse kontrollierter und unkontrollierter Komponenten in React
Inhaltsverzeichnis Unkontrollierte Komponenten Ko...