Share
HTML5 führte eine Reihe neuer Elemente ein, darunter einige interessante Formularsteuerelemente. Eine solche nützliche, jedoch wenig bekannte Steuerung ist das Datenelement. Mal sehen, was es für uns tun kann.
Stellen Sie sich vor, wir haben ein Formular, und wir möchten, dass ein Benutzer eine Zeichenfolge eingeben kann, wie zum Beispiel der Name. Wir haben das Element, mit dem der Benutzer eingeben kann, was er oder sie möchte. Stellen Sie sich vor, wir möchten, dass der Benutzer sein Wohnsitzland betritt. Wir würden wahrscheinlich eine verwenden Element. Dies würde die Ergebnisse auf die verfügbaren Optionen beschränken (manchmal eine gute Sache) und dem Benutzer auch eine potenzielle Möglichkeit bieten enorm Liste zur Auswahl.
Was aber, wenn wir möchten, dass der Benutzer frei sein kann, was er möchte, während er gleichzeitig einige Vorschläge erhält? Das ist wo datalist kommt herein.
Das datalist enthält Möglichkeit Elemente ähnlich wie die wählen Element jedoch datalist selbst ist keine unabhängige Kontrolle. Stattdessen wird es einem hinzugefügt oder angehängt Element mit der Liste Attribut. Betrachten Sie das folgende Markup:
Wir haben einen Stammgast Kontrolle mit einem Ich würde und das Neue Liste Attribut. Dadurch wird der Browser angewiesen, die Liste der Werte oder Vorschläge aus dem Browser zu laden datalist Element mit einer entsprechenden ID.
Dann kommt die eigentliche datalist Element mit den vorgenannten Ich würde und eine Sammlung von Möglichkeit Elemente. So werden die Werte an die angehängt Eingang Steuerung.
Wenn Sie dies im Browser ausführen, wird ein normales Textfeld angezeigt. Wenn Sie mit der Eingabe beginnen (oder die Abwärtspfeiltaste drücken, die in Firefox und Chrome, aber nicht in Opera funktioniert), erscheint die vollständige oder gefilterte Liste. Während der Eingabe werden nur die relevanten Optionen angezeigt, ähnlich wie das Suchfeld von Google Vorschläge anzeigt. Beachten Sie jedoch, dass es von Browser zu Browser geringfügige Verhaltensänderungen gibt.
Laut der offiziellen W3C-Website ist das datalist kann verwendet werden mit:
Accentsconagua
Mit addind a können wir die Optionen noch einen Schritt weiter gehen Etikette Attribut wie in einigen der folgenden Elemente:
Wie genau diese Etiketten angezeigt und gehandhabt werden, hängt vom Browser ab Macken Abschnitt weiter unten, um zu sehen, wie.
Die Browserunterstützung für datalist blieb bis vor kurzem eng. Jetzt unterstützen es IE 10+, Firefox 4+, Chrome und Opera (noch keine Safari). Es wird auch von Opera Mobile und Firefox für Android unterstützt. Schauen Sie sich diesen Screenshot an, der den aktuellen Status von caniuse.com zeigt:
Ältere Browser ignorieren das Datenelement automatisch.
Die genannte Gesamtunterstützung beträgt 48,36%. Vermutlich nicht so gut, aber die positive Nachricht ist, dass ältere Browser das datalistische Element automatisch ignorieren, was uns eine anmutig erniedrigende Erfahrung verleiht. Dies gilt in der Tat für alle neuen HTML5-Formularelemente. Wenn Unterstützung für ältere Browser erforderlich ist, kann jQuery Autocomplete als Fallback verwendet werden.
Da eine breitere Browserunterstützung erst seit kurzem verfügbar ist, gibt es von den Anbietern vorhersehbare Interpretationen. Firefox und Chrome verwenden das OS-Design für die Gestaltung der Listenoptionen, während Opera bestimmte Stile (Farbe, Schriftfamilie) von übernimmt Eingang Feld. Ansonsten vergessen Sie, das datalistische Element mit CSS zu gestalten.
Das Verhalten hängt auch davon ab, wie die Werte gefiltert werden. Jeder Browser behandelt die Liste unterschiedlich, wenn Etikette und Wert Attribute des Möglichkeit Element verwendet werden.
Opera filtert beispielsweise nach Wert und Bezeichnung. "by A" und "Brac" geben in unserem Fall beide "Brackets" zurück.
Chrome wird das Label jedoch ignorieren. "by A" gibt beispielsweise keine Ergebnisse zurück, wohingegen "Brac" dies tun wird.
Firefox zeigt nur die Bezeichnung an, wenn diese definiert ist. "von A" wird "von Adobe" zurückgegeben, aber "Klammern" sind überhaupt nicht mehr vorhanden!
In Bezug auf die Implementierung gibt es viel Raum für Verbesserungen, aber insgesamt ist dies eine willkommene Bereicherung für die Welt des Webs. Ich hoffe, das hat Sie Appetit gemacht!
