HTML5-Datenliste sichtbar machen, wenn das Fokusereignis bei der Eingabe ausgelöst wird
Lesezeit: 7 Minuten
Wie einige vielleicht bereits wissen, ist das Stylen von Select-Elementen ein Albtraum, der ohne Javascript-Tricks buchstäblich unmöglich ist. Die neue Datenliste in HTML5 könnte denselben Zweck erfüllen, da dem Benutzer eine Liste von Optionen präsentiert wird und der Wert in einem Eingabetextfeld aufgezeichnet wird.
Die Einschränkung hier ist, dass die Liste nicht angezeigt wird, bis der Benutzer beginnt, etwas in das Textfeld einzugeben, und selbst dann werden nur mögliche Übereinstimmungen basierend auf ihrer Eingabe angezeigt. Das gewünschte Verhalten ist, dass die gesamte Liste der Optionen sichtbar wird, sobald der Fokus auf das Feld gelegt wird.
Fokus setzen und alten Wert in einer — globalen — Variablen speichern
Maus nach unten:
Wert löschen und anzeigen datalist (integrierte Funktionalität)
Maus hoch:
Alten Wert wiederherstellen
Dann neuen Wert auswählen.
Finden Sie dies eine akzeptable Problemumgehung für eine Combobox.
Wie macht das das, wonach das OP gefragt hat?
– Tom
27. Juli 2014 um 8:32 Uhr
Wird überhaupt JQuery-Code benötigt? Ich denke, Datenliste und Eingabe mit Listenzuordnung sollten ausreichen, um das Erforderliche (in Chrome) zu tun, oder gibt es hier ein Browser-Kompatibilitätsproblem, das ich vermisse?
– saurshaz
26. April 2015 um 4:42 Uhr
Benutzer4723924
Ich hoffe, Ihnen gefällt diese Lösung:
Ich habe dem Eingabefeld zum Speichern ein „temp“-Attribut hinzugefügt, und sobald die Maus über das Eingabefeld schwebt, speichert es seinen aktuellen Wert in temp und löscht dann den Wert, damit die Datenliste geöffnet werden kann.
Beim Mouseout wird der Feldwert aus der Variablen temp wiederhergestellt. Diese Lösung funktioniert hervorragend unter Chromium, das ich getestet habe.
Als Bonus können Sie a hinzufügen placeholder="Click to see all your options"
Ich habe das Gefühl, dass die Spezifikation ein weiteres INPUT-Attribut haben sollte, das den Browser anweist, dieses Verhalten oder so etwas bereitzustellen. Aus Sicht der Benutzerfreundlichkeit fehlt meiner Meinung nach die List/Datalist-Spezifikation. Ihre Lösung ist ein sauberer, einfacher Workaround! Vielen Dank!
– Todd Hammer
2. Juli 2018 um 17:41 Uhr
Wenn das Dropdown-Menü in Ihrem Beispiel geöffnet ist und ich die Seite scrolle, wird das Dropdown-Menü ebenfalls nach unten gescrollt (mit Chromium). Ich habe dieses Verhalten noch nie zuvor mit Datalist gesehen.
– Sybille Peters
15. Mai 2020 um 16:20 Uhr
In der “Ulrich Berth”-Antwort wird beim Klicken auf die Eingabe der Wert in der Eingabe zurückgesetzt und es ist nicht möglich, den darin enthaltenen Text auszuwählen. Sie können dies verwenden, um das Problem zu vermeiden:
function inputFocus(){
var input = document.getElementById("input");
if(input.value == ""){
value="";
}else{
old = value = input.value;
}
}
Die Frage ist ziemlich alt, aber sie ist die Top-Suche bei Google und es sind keine Antworten zu finden, also werde ich sie hier hinzufügen.
Um die Datenliste beim ersten Klick zu erweitern, müssen Sie festlegen
dataListElement.style.display = "block";
und verstecken Sie es sofort in der nächsten Zeile, sodass es nicht als Element in Ihrem DOM angezeigt wird, sondern nur unter dem Eingabeelement erweitert wird.
dataListElement.style.display = "none";
Ab heute wird es nicht beim ersten Klick nur in Firefox erweitert.
Gutes Denken, aber das ist nicht das Verhalten, das ich anstrebe. Für unsere UX möchten wir kein Halter-Div erstellen, da wir mindestens 3 dieser Eingaben nebeneinander haben werden. Ich möchte, dass die Datenliste anzeigt, wann die Eingabe das Fokusereignis erhält.
– Ady Ngom
27. März 2013 um 17:43 Uhr
Warum nicht auf den Eingabetyp Text doppelklicken? Es wird die gesamte Liste angezeigt.
– writeToBhuwan
27. März 2013 um 19:37 Uhr
Als Entwickler weiß ich, dass ich das tun muss, um dorthin zu gelangen, aber es ist für den Benutzer, der höchstwahrscheinlich daran gewöhnt ist, einmal in ein Eingabefeld zu klicken und mit der Eingabe zu beginnen, nicht offensichtlich, weshalb ich versuche, den zweiten Klick auszulösen sobald sie sich konzentrieren
– Ady Ngom
28. März 2013 um 14:37 Uhr
Sie wissen nur, dass sie doppelklicken müssen, wenn sie dazu aufgefordert werden, ansonsten ist es nicht offensichtlich
– droh
2. November 2018 um 15:11 Uhr
Gutes Denken, aber das ist nicht das Verhalten, das ich anstrebe. Für unsere UX möchten wir kein Halter-Div erstellen, da wir mindestens 3 dieser Eingaben nebeneinander haben werden. Ich möchte, dass die Datenliste anzeigt, wann die Eingabe das Fokusereignis erhält.
– Ady Ngom
27. März 2013 um 17:43 Uhr
Warum nicht auf den Eingabetyp Text doppelklicken? Es wird die gesamte Liste angezeigt.
– writeToBhuwan
27. März 2013 um 19:37 Uhr
Als Entwickler weiß ich, dass ich das tun muss, um dorthin zu gelangen, aber es ist für den Benutzer, der höchstwahrscheinlich daran gewöhnt ist, einmal in ein Eingabefeld zu klicken und mit der Eingabe zu beginnen, nicht offensichtlich, weshalb ich versuche, den zweiten Klick auszulösen sobald sie sich konzentrieren
– Ady Ngom
28. März 2013 um 14:37 Uhr
Sie wissen nur, dass sie doppelklicken müssen, wenn sie dazu aufgefordert werden, ansonsten ist es nicht offensichtlich
– droh
2. November 2018 um 15:11 Uhr
10927800cookie-checkHTML5-Datenliste sichtbar machen, wenn das Fokusereignis bei der Eingabe ausgelöst wirdyes
Ich versuche das gleiche zu erreichen, hattest du bisher Glück?
– Glanz
21. April 2013 um 16:51 Uhr