Leichte automatische Steuerelemente mit dem HTML5 -Datalisten-CSS-Tutorial-php.cn

Heim

Web-Frontend

CSS-Tutorial

Leichte automatische Steuerelemente mit dem HTML5 -Datalisten

Jennifer Aniston

Feb 10, 2025 pm 03:18 PM

Leichte automatische Steuerelemente mit dem HTML5 -Datalisten

In diesem Tutorial werden wir ein tiefes Tauchgang in das wenig verwendete HTML5 -Element einnehmen. Es kann eine leichte, zugängliche Cross-Browser-Autokontrolle implementieren, für die kein JavaScript erforderlich ist.

Key Takeaways

Das HTML5 `` -Element bietet eine leichte, zugängliche und Kreuzbrowser-Lösung für Autokontrollensteuerelemente, ohne sich auf JavaScript zu verlassen.
Im Gegensatz zu `
Browserunterstützung für `` ist in modernen Browsern, einschließlich Internet Explorer 10 und 11, robust. Für ältere Browser werden für ältere Browser eine Kombination aus `
Das Element `` kann nicht direkt mit CSS gestylt werden, was die Anpassung einschränkt, sondern die Konsistenz über verschiedene Browser und Plattformen sorgt.
Verbesserungen wie AJAX können in "" integriert werden, um Optionen basierend auf der Benutzereingabe dynamisch zu füllen, die Funktionalität und die Benutzererfahrung in Anwendungen zu verbessern, die Echtzeitdaten-Feedback erfordern.

Was ist los mit

html5

Es gibt viele Optionen, wie Länder oder Jobtitel
Der Benutzer möchte seine eigene Option eingeben, die nicht in der Liste steht

Die offensichtliche Lösung ist eine automatische Kontrolle. Auf diese Weise kann der Benutzer einige Zeichen eingeben, was die für eine schnellere Auswahl verfügbaren Optionen einschränkt.

Entwickler wenden sich häufig an eine der vielen JavaScript-Lösungen, aber eine benutzerdefinierte automatische Kontrolle ist nicht immer erforderlich. Das HTML5 -Element ist leicht, zugänglich und hat keine JavaScript -Abhängigkeiten. Möglicherweise haben Sie gehört, dass es fehlerhaft ist oder es fehlt. Das stimmt 2021 nicht, aber es gibt Browser -Inkonsistenzen und Vorbehalte.

Schnellstart

Ihr Land aus einer Liste mit mehr als 200 Optionen auswählen, ist ein idealer Kandidat für eine automatische Kontrolle. Definieren Sie a mit Child

<span><span><span><datalist> id<span>="countrydata"</span>></datalist></span>
</span>  <span><span><span><option>></option></span>Afghanistan<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Åland Islands<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Albania<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Algeria<span><span></span>></span>
</span>  <span><span><span><option>></option></span>American Samoa<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Andorra<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Angola<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Anguilla<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Antarctica<span><span></span>></span>
</span>  ...etc...
<span><span><span></span>></span>
</span></span></span></span></span></span></span></span></span></span></span>

Die ID des Datalists kann dann durch ein Listenattribut in jedem Feld verwiesen werden:

<span><span><span><label> for<span>="country"</span>></label></span>country<span><span></span>></span>
</span>
<span><span><span><input> type<span>="text"</span>
</span></span><span>  <span>list<span>="countrydata"</span>
</span></span><span>  <span>id<span>="country"</span> name<span>="country"</span>
</span></span><span>  <span>size<span>="50"</span>
</span></span><span>  <span>autocomplete<span>="off"</span> /></span>
</span></span></span>

verwirrend ist es am besten, autocomplete = "off" festzulegen. Dies stellt sicher

Das Ergebnis:

Leichte automatische Steuerelemente mit dem HTML5 -Datalisten

Dies ist das Standard -Rendering in Microsoft Edge. Andere Anwendungen implementieren ähnliche Funktionen, aber das Aussehen unterscheidet sich über Plattformen und Browser hinweg.

Verwenden des Etiketts als Textkind einer

<span><span><span><datalist> id<span>="countrydata"</span>></datalist></span>
</span>  <span><span><span><option>></option></span>Afghanistan<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Åland Islands<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Albania<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Algeria<span><span></span>></span>
</span>  <span><span><span><option>></option></span>American Samoa<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Andorra<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Angola<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Anguilla<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Antarctica<span><span></span>></span>
</span>  ...etc...
<span><span><span></span>></span>
</span></span></span></span></span></span></span></span></span></span></span>

Die Verwendung eines Wertattributs erzeugt identische Ergebnisse:

<span><span><span><label> for<span>="country"</span>></label></span>country<span><span></span>></span>
</span>
<span><span><span><input> type<span>="text"</span>
</span></span><span>  <span>list<span>="countrydata"</span>
</span></span><span>  <span>id<span>="country"</span> name<span>="country"</span>
</span></span><span>  <span>size<span>="50"</span>
</span></span><span>  <span>autocomplete<span>="off"</span> /></span>
</span></span></span>

Hinweis: Der Schließ /> Schrägstrich ist in HTML5 optional, obwohl er dazu beitragen könnte, Codierungsfehler zu verhindern.

Sie können auch einen Wert gemäß einer ausgewählten Etikett mit einem der folgenden Formate festlegen.

Option 1:

<span><span><span><datalist> id<span>="mylist"</span>></datalist></span>
</span>  <span><span><span><option>></option></span>label one<span><span></span>></span>
</span>  <span><span><span><option>></option></span>label two<span><span></span>></span>
</span>  <span><span><span><option>></option></span>label three<span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span>

Option 2:

<span><span><span><datalist> id<span>="mylist"</span>></datalist></span>
</span>  <span><span><span><option> value<span>="label one"</span> /></option></span>
</span>  <span><span><span><option> value<span>="label two"</span> /></option></span>
</span>  <span><span><span><option> value<span>="label three"</span> /></option></span>
</span><span><span><span></span>></span>
</span></span></span></span></span>

In beiden Fällen ist das Eingangsfeld auf 1, 2 oder 3 eingestellt, wenn eine gültige Option ausgewählt wird, die Benutzeroberfläche variiert jedoch über Browser:

Chrome zeigt eine Liste mit dem Wert und dem Etikett. Nur der Wert bleibt, sobald eine Option ausgewählt ist.
Firefox zeigt nur eine Liste mit dem Etikett. Es wechselt auf den Wert, sobald eine Option ausgewählt ist.
Kante zeigt nur den Wert.

Das folgende CodePen -Beispiel zeigt alle Variationen:

Siehe den Stift
html5 automatische Beispiele von SitePoint (@sinepoint)
auf CodePen.

Implementierungen werden sich entwickeln, aber ich würde vorerst empfehlen, keinen Wert und Kennzeichnung zu verwenden, da es wahrscheinlich die Benutzer verwirren. (Eine Problemumgehung wird unten erörtert.)

Browser -Unterstützung und Fallbacks

Das Element wird sowohl in modernen Browsern als auch in Internet Explorer 10 und 11:

gut unterstützt.

Leichte automatische Steuerelemente mit dem HTML5 -Datalisten

Es gibt mehrere Implementierungsnotizen, aber sie beeinflussen keinen Einfluss auf die meisten Nutzungen. Das Schlimmste, was passieren könnte, ist, dass ein Feld zu einer Standardtexteingabe zurückkehrt.

Wenn Sie IE9 und unten unbedingt unterstützen müssen, gibt es ein Fallback -Muster, das in Verbindung mit einer Texteingabe einen Standard verwendet, wenn der fehlschlägt. Anpassung des Landes Beispiel:

<span><span><span><datalist> id<span>="countrydata"</span>></datalist></span>
</span>  <span><span><span><option>></option></span>Afghanistan<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Åland Islands<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Albania<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Algeria<span><span></span>></span>
</span>  <span><span><span><option>></option></span>American Samoa<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Andorra<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Angola<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Anguilla<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Antarctica<span><span></span>></span>
</span>  ...etc...
<span><span><span></span>></span>
</span></span></span></span></span></span></span></span></span></span></span>

Siehe den Stift
html5 Autoperete Fallback von SitePoint (@sinepoint)
auf CodePen.

In modernen Browsern werden die

In IE9 und unten sind sowohl die (sehr langen)

Leichte automatische Steuerelemente mit dem HTML5 -Datalisten

Beide Werte können in alten IES eingegeben werden. Ihre Bewerbung muss entweder:

entscheiden Sie, welches am gültigsten ist oder
Verwenden Sie eine kleine JavaScript -Funktion, um eine zurückzusetzen, wenn das andere geändert wird

Verwenden von für Nicht-Text-Steuerelemente

Chrome-basierte Browser können auch -Werte anwenden auf:

Eine Eingabe mit dem Typ "Datum". Der Benutzer kann aus einer Reihe von Optionen wählen, die als YJJJ-MM-DD-Werte definiert sind, aber in seinem Gebietsschemasformat dargestellt werden.
Ein Eingang mit der Art der "Farbe". Der Benutzer kann aus einer Auswahl von Farboptionen wählen, die als sechsstellige Hex-Werte definiert sind (dreistellige Werte funktionieren nicht).
Ein Eingang mit einer Art "Bereich". Der Schieberegler zeigt Zeckenspuren an, obwohl dies nicht eingeschränkt ist, welcher Wert eingegeben werden kann.

Siehe den Stift
html5 auf anderen Eingabetypen nach SitePoint (@sinepoint)
auf CodePen.

CSS -Styling

Wenn Sie jemals Probleme mit einem -Box ausgewählt haben, hatten Sie es einfach!

An kann als normal gestaltet werden, aber ein verknüpfter und seine Kinder

Ich hoffe, diese Situation verbessert sich, aber im Moment wird eine Lösung bei MDN vorgeschlagen, die:

überschreibt das Standard -Browser -Verhalten
behandelt die wie eine
effektiv, sodass es in CSS gestylt werden kann
repliziert alle automatischen Funktionen in JavaScript

Ich habe es weiter erweitert und der Code ist auf GitHub verfügbar. Laden Sie das Skript überall in Ihrer HTML -Seite als ES6 -Modul. Die JSDelivr CDN -URL kann verwendet werden:

<span><span><span><datalist> id<span>="countrydata"</span>></datalist></span>
</span>  <span><span><span><option>></option></span>Afghanistan<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Åland Islands<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Albania<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Algeria<span><span></span>></span>
</span>  <span><span><span><option>></option></span>American Samoa<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Andorra<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Angola<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Anguilla<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Antarctica<span><span></span>></span>
</span>  ...etc...
<span><span><span></span>></span>
</span></span></span></span></span></span></span></span></span></span></span>

oder Sie können es mit NPM installieren, wenn Sie einen Bundler verwenden:

<span><span><span><label> for<span>="country"</span>></label></span>country<span><span></span>></span>
</span>
<span><span><span><input> type<span>="text"</span>
</span></span><span>  <span>list<span>="countrydata"</span>
</span></span><span>  <span>id<span>="country"</span> name<span>="country"</span>
</span></span><span>  <span>size<span>="50"</span>
</span></span><span>  <span>autocomplete<span>="off"</span> /></span>
</span></span></span>

Ihr Elemente muss das Format verwenden. Zum Beispiel:

<span><span><span><datalist> id<span>="mylist"</span>></datalist></span>
</span>  <span><span><span><option>></option></span>label one<span><span></span>></span>
</span>  <span><span><span><option>></option></span>label two<span><span></span>></span>
</span>  <span><span><span><option>></option></span>label three<span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span>

Hinweis: kann nicht verwendet werden, da es zu einem leeren Element führt, das nicht gestylt werden kann!

cs Zum Beispiel:

<span><span><span><datalist> id<span>="mylist"</span>></datalist></span>
</span>  <span><span><span><option> value<span>="label one"</span> /></option></span>
</span>  <span><span><span><option> value<span>="label two"</span> /></option></span>
</span>  <span><span><span><option> value<span>="label three"</span> /></option></span>
</span><span><span><span></span>></span>
</span></span></span></span></span>

Beispiel:

Siehe das Stift
html5 automatischer CSS -Styling von SitePoint (@sitepoint)
auf CodePen.

Styling funktioniert, aber ist es die Mühe wert? Ich vermute nicht…

Implementieren Sie die Standardtastatur, Maus und Berührungssteuerungen des Browsers mit angemessener Zugänglichkeit ist schwierig. Das MDN -Beispiel unterstützt keine Tastaturereignisse, und obwohl ich versucht habe, es zu verbessern, wird es zwangsläufig Probleme auf einigen Geräten geben.
Sie verlassen sich auf 200 Zeilen von JavaScript, um ein CSS -Problem zu lösen. Es wird auf 1,5 KB abgebaut, könnte jedoch Leistungsprobleme einführen, wenn Sie auf derselben Seite viele lange Elemente benötigen.
Wenn JavaScript eine Anforderung ist

ohne Styling zurück, wenn JavaScript fehlschlägt, aber das ist ein kleiner Vorteil.

Erstellen eines AJAX-verbesserten

Vorausgesetzt, Ihr Designer akzeptiert gerne die Unterschiede im Browser -Styling. Es ist möglich, die Standard -Funktionalität mithilfe von JavaScript zu verbessern. Zum Beispiel:

akzeptiert

set

Der Code muss in erster Linie > Åland Islands> Albania> Algeria> American Samoa> Andorra> Angola> Anguilla> Antarctica> ...etc... >

oder Sie können es mit NPM installieren, wenn Sie einen Bundler verwenden:

<span><span><span><label> for<span>="country"</span>></label></span>country<span><span></span>></span>
</span>
<span><span><span><input> type<span>="text"</span>
</span></span><span>  <span>list<span>="countrydata"</span>
</span></span><span>  <span>id<span>="country"</span> name<span>="country"</span>
</span></span><span>  <span>size<span>="50"</span>
</span></span><span>  <span>autocomplete<span>="off"</span> /></span>
</span></span></span>

Erstellen Sie ein Element mit einer untergeordneten , die als Dateneingangsfeld verwendet werden kann. Zum Beispiel verwendet die Länder -Lookup Folgendes:

<span><span><span><datalist> id<span>="mylist"</span>></datalist></span>
</span>  <span><span><span><option>></option></span>label one<span><span></span>></span>
</span>  <span><span><span><option>></option></span>label two<span><span></span>></span>
</span>  <span><span><span><option>></option></span>label three<span><span></span>></span>
</span><span><span><span></span></span></span></span></span></span></span>

Elementattribute:

Attribut Beschreibung API Die Rest -API -URL (erforderlich) resultdata Der Name der Eigenschaft, die ein Ergebnisarray von Objekten in der zurückgegebenen API JSON enthält (nicht erforderlich, wenn nur die Ergebnisse zurückgegeben werden) Ergebnisname Der Name der Eigenschaft in jedem Ergebnisobjekt, das mit der Sucheingabe übereinstimmt und für Datalist > Åland Islands> Albania> Algeria> American Samoa> Andorra> Angola> Anguilla> Antarctica> ...etc...

Das Ergebnisdata -Attribut muss nicht festgelegt werden, da dies die einzigen Daten sind (es gibt kein Wrapper -Objekt). Das Ergebnisname -Attribut muss auf "Name" festgelegt werden

<span><span><span><label> for<span>="country"</span>></label></span>country<span><span></span>></span>
</span>
<span><span><span><input> type<span>="text"</span>
</span></span><span>  <span>list<span>="countrydata"</span>
</span></span><span>  <span>id<span>="country"</span> name<span>="country"</span>
</span></span><span>  <span>size<span>="50"</span>
</span></span><span>  <span>autocomplete<span>="off"</span> /></span>
</span></span></span>

funktioniert

Sie können diesen Abschnitt überspringen, wenn Sie lieber 230 Codezeilen lesen und die Magie am Leben erhalten möchten!

innerhalb des , das er mit einem Listenattribut an das untergeordnete angeschlossen wird. Ein Eingabeereignis -Handler überwacht die und ruft eine RunQuery () -Funktion auf, wenn eine minimale Anzahl von Zeichen eingegeben wurde und der Benutzer noch nicht tippt.

runQuery () erstellt die API -URL aus Daten im Formular und macht einen Ajax -Aufruf mit der Fetch -API. Der zurückgegebene JSON ist analysiert, dann wird ein wiederverwendbares DOM -Fragment, das

Das obige ist der detaillierte Inhalt vonLeichte automatische Steuerelemente mit dem HTML5 -Datalisten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Verwandter Artikel

Wie viel Spezifität haben @Rules wie @Keyframes und @Media?Apr 18, 2025 am 11:34 AM

Ich habe diese Frage neulich bekommen. Mein erster Gedanke ist: seltsame Frage! Bei der Spezifität geht es um Selektoren, und Rules sind keine Selektoren, also ... irrelevant?

Können Sie @Media und @Support -Abfragen nisten?Apr 18, 2025 am 11:32 AM

Ja, Sie können, und es ist nicht wirklich wichtig in welcher Reihenfolge. Ein CSS -Präprozessor ist nicht erforderlich. Es funktioniert in regulären CSS.

Schnellschluck -Cache -BustingApr 18, 2025 am 11:23 AM

Sie sollten auf jeden Fall weitausgestellte Cache-Header auf Ihren Vermögenswerten wie CSS und JavaScript (und Bilder und Schriftarten und was auch immer) festlegen. Das sagt dem Browser

Auf der Suche nach einem Stapel, der die Qualität und Komplexität von CSS überwachtApr 18, 2025 am 11:22 AM

Viele Entwickler schreiben darüber, wie sie eine CSS -Codebasis pflegen können, aber nicht viele von ihnen schreiben darüber, wie sie die Qualität dieser Codebasis messen. Sicher, wir haben

Datalist dient dazu, Werte vorzuschlagen, ohne Werte durchzusetzenApr 18, 2025 am 11:08 AM

Haben Sie jemals ein Formular gehabt, das ein kurzes, willkürliches Stück Text akzeptieren musste? Wie ein Name oder was auch immer. Das ist genau das, wofür es ist. Es gibt viele

Frontkonferenz in ZürichApr 18, 2025 am 11:03 AM

Ich bin so aufgeregt, nach Zürich, der Schweiz, zur Frontkonferenz zu gehen (liebe diesen Namen und diese URL!). Ich war noch nie in der Schweiz, also bin ich aufgeregt

Erstellen einer serverlosen Full-Stack-Anwendung mit Cloudflare-MitarbeiternApr 18, 2025 am 10:58 AM

Eine meiner Lieblingsentwicklungen in der Softwareentwicklung war das Aufkommen von Serverless. Als Entwickler, der die Tendenz hat, sich in den Details festzuhalten

Erstellen dynamischer Routen in einer Nuxt -AnwendungApr 18, 2025 am 10:53 AM

In diesem Beitrag werden wir eine E -Commerce -Store -Demo verwenden, die ich für Netlify erstellt und bereitgestellt habe, um zu zeigen, wie wir dynamische Routen für eingehende Daten erstellen können. Es ist fair

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Assassin's Creed Shadows: Seashell Riddle -Lösung

3 Wochen vorByDDD

Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben

2 Wochen vorByDDD

Wo kann man die Kransteuerungsschlüsselkarten in Atomfall finden

3 Wochen vorByDDD

Ersparnis in R.E.P.O. Erklärt (und speichern Dateien)

1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌

Assassins Creed Shadows - So finden Sie den Schmied und entsperren Sie die Waffen- und Rüstungsanpassung

3 Wochen vorByDDD

Heiße Werkzeuge

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

MinGW – Minimalistisches GNU für Windows

Dieses Projekt wird derzeit auf osdn.net/projects/mingw migriert. Sie können uns dort weiterhin folgen. MinGW: Eine native Windows-Portierung der GNU Compiler Collection (GCC), frei verteilbare Importbibliotheken und Header-Dateien zum Erstellen nativer Windows-Anwendungen, einschließlich Erweiterungen der MSVC-Laufzeit zur Unterstützung der C99-Funktionalität. Die gesamte MinGW-Software kann auf 64-Bit-Windows-Plattformen ausgeführt werden.

Dreamweaver CS6

Visuelle Webentwicklungstools

mPDF

mPDF ist eine PHP-Bibliothek, die PDF-Dateien aus UTF-8-codiertem HTML generieren kann. Der ursprüngliche Autor, Ian Back, hat mPDF geschrieben, um PDF-Dateien „on the fly“ von seiner Website auszugeben und verschiedene Sprachen zu verarbeiten. Es ist langsamer und erzeugt bei der Verwendung von Unicode-Schriftarten größere Dateien als Originalskripte wie HTML2FPDF, unterstützt aber CSS-Stile usw. und verfügt über viele Verbesserungen. Unterstützt fast alle Sprachen, einschließlich RTL (Arabisch und Hebräisch) und CJK (Chinesisch, Japanisch und Koreanisch). Unterstützt verschachtelte Elemente auf Blockebene (wie P, DIV),