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
Was sind die Verwendungszwecke von Limits in MySQL (empfohlen)
SELECT * FROM Tabellenname Limit m,n; SELECT * FR...
So stellen Sie das umfassende Benutzererlebnis sicher
Verwandte Artikel: Website-Design für Benutzererfa...
MySQL Master-Slave-Replikationsprinzip und zu beachtende Punkte
Vorne geschrieben Ich habe kürzlich ein spezielle...
Beschreibung der Nginx-Zugriffsprotokoll- und Fehlerprotokollparameter
veranschaulichen: Es gibt zwei Haupttypen von Ngi...
Lebenszyklus und Hook-Funktionen in Vue
Inhaltsverzeichnis 1. Was ist der Lebenszyklus 2....
MySQL-Dateneinfügungsoptimierungsmethode concurrent_insert
Wenn ein Thread eine DELAYED-Anweisung für eine T...
JS implementiert Click-Drop-Effekt
js realisiert den Spezialeffekt des Klickens und ...
Grafisches Tutorial zur Installation und Konfiguration der Dekomprimierungsversion von MySQL 8.0.25
Installations-Tutorial zur dekomprimierten Versio...
Detaillierte Erklärung der Vue-Optionen
Inhaltsverzeichnis 1. Was sind Optionen? 2. Welch...
Erfahren Sie, wie Sie mithilfe des Nginx-Dienstes eine Subdomain-Umgebung erstellen, um die Ladeleistung von 2D-Karten zu verbessern.
1. Hintergrund Vor kurzem stießen einige Freunde ...
js, um den Popup-Effekt zu erzielen
In diesem Artikelbeispiel wird der spezifische Co...
So rufen Sie das unterbrochene System in Linux auf
Vorwort Langsame Systemaufrufe beziehen sich auf ...
Verwenden Sie Xshell, um eine Verbindung zur virtuellen Linux-Maschine auf VMware herzustellen (grafische Schritte)
Vorwort: Ich habe vor Kurzem begonnen, den Aufbau...
Das Textdesign einer Webseite sollte aussehen wie die Kleidung von intelligenten Mädchen
<br />„Es gibt keine hässlichen Frauen auf d...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.10 WinX64 (Win10)
MySQL ist eine relativ einfach zu verwendende rel...