Leichte automatische Steuerelemente mit dem HTML5 -Datalisten

In diesem Tutorial werden wir ein tiefes Tauchgang in das wenig verwendete HTML5

Key Takeaways

• Das HTML5 `
• Im Gegensatz zu `` ist `` `` ist praktischer für die Behandlung einer großen Anzahl von Optionen und ermöglicht es Benutzern, benutzerdefinierte Werte einzugeben, die nicht in den vordefinierten Optionen aufgeführt sind.
• Browserunterstützung für `
• Das Element `
• Verbesserungen wie AJAX können in "

Was ist los mit ?

html5 Steuerelemente sind ideal, wenn der Benutzer aus einer kleinen Reihe von Optionen auswählen soll. Sie sind weniger praktisch, wenn:

• 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.

springt mit der Eingabe zum richtigen Ort, aber das ist nicht immer offensichtlich. Es funktioniert nicht auf allen Geräten (wie Touchscreens) und setzt innerhalb von ein oder zwei Sekunden zurück.

Entwickler wenden sich häufig an eine der vielen JavaScript-Lösungen, aber eine benutzerdefinierte automatische Kontrolle ist nicht immer erforderlich. Das HTML5

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

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

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

<span><span><span><label</span> for<span>="country"</span>></span>country<span><span></label</span>></span>
</span>
<span><span><span><input</span> 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>

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

Das Ergebnis:

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

Optionen

Verwenden des Etiketts als Textkind einer ist häufig:

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

Die Verwendung eines Wertattributs erzeugt identische Ergebnisse:

<span><span><span><label</span> for<span>="country"</span>></span>country<span><span></label</span>></span>
</span>
<span><span><span><input</span> 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>

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</span> id<span>="mylist"</span>></span>
</span>  <span><span><span><option</span>></span>label one<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>label two<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>label three<span><span></option</span>></span>
</span><span><span><span></datalist</span>></span>
</span>

Option 2:

<span><span><span><datalist</span> id<span>="mylist"</span>></span>
</span>  <span><span><span><option</span> value<span>="label one"</span> /></span>
</span>  <span><span><span><option</span> value<span>="label two"</span> /></span>
</span>  <span><span><span><option</span> value<span>="label three"</span> /></span>
</span><span><span><span></datalist</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

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.)

Das Element

gut unterstützt.

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

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

Siehe den Stift
html5

In modernen Browsern werden die -Elemente Teil des

In IE9 und unten sind sowohl die (sehr langen) als auch die Texteingangsfelder aktiv:

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

Chrome-basierte Browser können auch

1. 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.

2. 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).

3. 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

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

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

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

1. überschreibt das Standard -Browser -Verhalten
2. behandelt die
3. 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</span> id<span>="countrydata"</span>></span>
</span>  <span><span><span><option</span>></span>Afghanistan<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Åland Islands<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Albania<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Algeria<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>American Samoa<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Andorra<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Angola<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Anguilla<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Antarctica<span><span></option</span>></span>
</span>  ...etc...
<span><span><span></datalist</span>></span>
</span>

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

<span><span><span><label</span> for<span>="country"</span>></span>country<span><span></label</span>></span>
</span>
<span><span><span><input</span> 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>

Ihr

<span><span><span><datalist</span> id<span>="mylist"</span>></span>
</span>  <span><span><span><option</span>></span>label one<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>label two<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>label three<span><span></option</span>></span>
</span><span><span><span></datalist</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</span> id<span>="mylist"</span>></span>
</span>  <span><span><span><option</span> value<span>="label one"</span> /></span>
</span>  <span><span><span><option</span> value<span>="label two"</span> /></span>
</span>  <span><span><span><option</span> value<span>="label three"</span> /></span>
</span><span><span><span></datalist</span>></span>
</span>

Beispiel:

Siehe das Stift
html5

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
• Wenn JavaScript eine Anforderung ist
Die Steuerung fällt auf einen Standard -HTML5

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!