click-Event auf datalist
0 
Robert B.
0 0 Robert B.
0 Felix Riesterer
0 
Rolf B
0 
Gunnar Bittersmann
click-Event auf datalist
Hallo allerseits,
ich versuche, per JS einen per Klick ausgewählten Wert aus einer Dataliste zu erhalten. Hört sich eigentlich banal an, aber ich kriegs nicht hin.
Ich habe also ein input-Feld mit einer angehängten datalist. Den Formular-Button zur Weiterverarbeitung möchte ich nur einblenden, wenn wirklich ein Wert aus der Dataliste ausgewählt wurde. Das funktioniert auch, wenn ich den Wert nach dem Tippen per Eingabetaste auswähle. Offenbar bezieht sich das keyup-Event - obwohl ich mich ja eigentlich in der datalist befinde - auf das input-Feld.
Beim click auf die datalist verhält sich das offenbar anders. Genauer gesagt tut sich hier gar nichts. Mausaktionen werden von der datalist komplett ignoriert. Die Lösung wäre selectionchange, aber das kann ja offenbar nur der Firefox.
Hier mein Versuchsscript: https://fsv-optik.de/tests/datalist.html
Vielleicht könnt ihr mir ja wieder auf die Sprünge helfen.
Schöne Grüße
Nico
-
Moin Nico,
ich versuche, per JS einen per Klick ausgewählten Wert aus einer Dataliste zu erhalten. Hört sich eigentlich banal an, aber ich kriegs nicht hin.
Ich habe also ein input-Feld mit einer angehängten datalist. Den Formular-Button zur Weiterverarbeitung möchte ich nur einblenden, wenn wirklich ein Wert aus der Dataliste ausgewählt wurde.
Mir scheint, dass du
datalistmitselectverwechselst:datalisterweitert eininputmit Eingabevorschlägen.selectbietet eine feste Auswahl an Eingabemöglichkeiten an.
In ein um eine
datalisterweitertesinputkönnen Nutzer also weiterhin beliebige Daten eingeben.Das funktioniert auch, wenn ich den Wert nach dem Tippen per Eingabetaste auswähle. Offenbar bezieht sich das keyup-Event - obwohl ich mich ja eigentlich in der datalist befinde - auf das input-Feld.
Event-Handling in Formularen kann trickreich sein. Wenn du direkt auf Eingaben reagieren möchtest, brauchst du einen Eventhandler für das
input-Event.Beim click auf die datalist verhält sich das offenbar anders. Genauer gesagt tut sich hier gar nichts. Mausaktionen werden von der datalist komplett ignoriert.
Das spricht auch für meine obige Vermutung.
Die Lösung wäre selectionchange, aber das kann ja offenbar nur der Firefox.
Mit einem Hinweis:
Das ist experimentell!
Hier mein Versuchsscript: https://fsv-optik.de/tests/datalist.html
Kleine Anmerkung hierzu:
scriptdarf kein Kind vonhtmlsein, insbesondere darf es kein Nachfolger desbodysein.Viele Grüße
Robert-
Hallo Robert,
Mir scheint, dass du
datalistmitselectverwechselst:datalisterweitert eininputmit Eingabevorschlägen.selectbietet eine feste Auswahl an Eingabemöglichkeiten an.
In ein um eine
datalisterweitertesinputkönnen Nutzer also weiterhin beliebige Daten eingeben.Ja, ich weiß. Für meinen Fall scheint mir allerdings vom Handling her ein input mit datalist geeigneter. In einem select wird sofort die komplette Palette an options angezeigt, das wären in meinem Fall einige Tausend.
Viele Nutzer wissen nicht, dass man in einer select-Liste auch tippen kann. Das heißt, die würden vermutlich endlos scrollen, um zum gewünschten Eintrag zu kommen. Die Variante input wirkt da deutlich aufgeräumter und weniger abschreckend. Die Auswahlliste verkleinert sich mit jedem eingegebenen Zeichen oder wird komplett geleert, wenn es keine Übereinstimmung mehr gibt. Das finde ich hervorragend.
Event-Handling in Formularen kann trickreich sein. Wenn du direkt auf Eingaben reagieren möchtest, brauchst du einen Eventhandler für das
input-Event.Auf dem input-Feld liegt wie gesagt ein keyup-Event, das auch auf die datalist reagiert. Nur beim click funktioniert das leider nicht. Viele (nicht geübte) User werden nach dem Tippen, wenn sie ihren gesuchten Eintrag sehen, vermutlich mit der Maus drauflosgehen…
Hier mal nochmal der Quelltext. Der JS-Teil mit keyup funktioniert wie gesagt, der zweite Teil war der Versuch, ein einzelnes option-Element aus der datalist per click zu erreichen, aber das ging ebensowenig wie direkt über datalist oder input.
<!DOCTYPE html> <html> <body> <h1>Datalist</h1> <form> <label for="feld">Browser:</label> <input list="liste" id="feld"> <datalist id="liste"> <option value="Edge (Microsoft)" id="test"> <option value="Firefox (Mozilla)"> <option value="Chrome (Google)"> <option value="Opera (Opera)"> <option value="Safari (Apple)"> </datalist> <input type="submit" id="button" style="display: none;"> </form> <script> (function () { const feld = document.getElementById("feld"); const liste = document.getElementById("liste"); const test = document.getElementById("test"); const button = document.getElementById("button"); // selectionchange hat im Edge nicht funktioniert... //feld.addEventListener("selectionchange", function(event) { feld.addEventListener("keyup", function(event) { if(feld.value.includes("(") && feld.value.includes(")")) { button.removeAttribute("style"); } }); test.addEventListener("click", function(event) { console.log("click"); if(feld.value.includes("(") && feld.value.includes(")")) { button.removeAttribute("style"); } }); })(); </script> </body> </html>Kleine Anmerkung hierzu:
scriptdarf kein Kind vonhtmlsein, insbesondere darf es kein Nachfolger desbodysein.Upps. Hab ich korrigiert.
Schöne Grüße Nico
-
Moin Nico,
Ja, ich weiß. Für meinen Fall scheint mir allerdings vom Handling her ein input mit datalist geeigneter. In einem select wird sofort die komplette Palette an options angezeigt, das wären in meinem Fall einige Tausend.
wie viel tatsächlich angezeigt wird, hängt vom Wert des
size-Attributs ab.Viele Nutzer wissen nicht, dass man in einer select-Liste auch tippen kann. Das heißt, die würden vermutlich endlos scrollen, um zum gewünschten Eintrag zu kommen. Die Variante input wirkt da deutlich aufgeräumter und weniger abschreckend. Die Auswahlliste verkleinert sich mit jedem eingegebenen Zeichen oder wird komplett geleert, wenn es keine Übereinstimmung mehr gibt. Das finde ich hervorragend.
Es sollte dann bloß transparent sein, dass bitte nur der Vorrat an Vorschlägen und nicht beliebiges eingegeben werden soll.
Event-Handling in Formularen kann trickreich sein. Wenn du direkt auf Eingaben reagieren möchtest, brauchst du einen Eventhandler für das
input-Event.Auf dem input-Feld liegt wie gesagt ein keyup-Event, das auch auf die datalist reagiert. Nur beim click funktioniert das leider nicht. Viele (nicht geübte) User werden nach dem Tippen, wenn sie ihren gesuchten Eintrag sehen, vermutlich mit der Maus drauflosgehen…
Deshalb nannte und verlinkte ich ja auch das
input-Event.Viele Grüße
Robert-
Deshalb nannte und verlinkte ich ja auch das
input-Event.Entschuldige, das hatte ich Überlesen bzw. völlig falsch verstanden. Damit funktionierts 😀
Es sollte dann bloß transparent sein, dass bitte nur der Vorrat an Vorschlägen und nicht beliebiges eingegeben werden soll.
Naja, es kann ruhig beliebiges eingetragen werden, sieht die Ergebnisliste halt entsprechend aus, ggf. ist sie leer. Das ist durchaus gewünscht so.
Schöne Grüße und danke, auch an die anderen.
Nico
-
Moin Nico,
Es sollte dann bloß transparent sein, dass bitte nur der Vorrat an Vorschlägen und nicht beliebiges eingegeben werden soll.
Naja, es kann ruhig beliebiges eingetragen werden, sieht die Ergebnisliste halt entsprechend aus, ggf. ist sie leer. Das ist durchaus gewünscht so.
Aus der Ausgangsfrage ging nicht so gut hervor, dass Werte außerhalb der
datalistauch erlaubt sein sollen:Den Formular-Button zur Weiterverarbeitung möchte ich nur einblenden, wenn wirklich ein Wert aus der Dataliste ausgewählt wurde.
Viele Grüße
Robert
-
-
-
Lieber Nico,
Auf dem input-Feld liegt wie gesagt ein keyup-Event,
hat man Dir nicht zum input-Event geraten? Warum bist Du diesem Rat nicht gefolgt?
[Code-Listing]
Bitte verwende passende online-Beispiele. Wenn Du sie selbst hostest, darfst Du versichert sein, dass wir auch in die Quelltexte und Entwickler-Werkzeuge im Browser schauen werden. Diese langen Listings braucht es wirklich nicht.
Übrigens könnte es so funktionieren: jsFiddle
Liebe Grüße
Felix Riesterer
-
Hallo Felix Riesterer,
Warum bist Du diesem Rat nicht gefolgt?
Vermutlich weil ihm das input-Event unbekannt war und er nicht gewusst hat, dass es bei jeder inhaltlichen Änderung des Eingabefelds feuert. Und zwar sofort, ohne darauf zu warten, dass der Eingabefokus das Feld verlässt. Egal, wie der User die Änderung vornimmt.
Rolf
--
sumpsi - posui - obstruxi
-
-
@@Nico R.
Den Formular-Button zur Weiterverarbeitung möchte ich nur einblenden, wenn wirklich ein Wert aus der Dataliste ausgewählt wurde.
Keine so gute Idee. Buttons sollten nicht ausgeblendet oder deaktiviert werden. Siehe Accessible Disabled Buttons.
Kwakoni Yiquan
--
Ad astra per aspera-
Keine so gute Idee. Buttons sollten nicht ausgeblendet oder deaktiviert werden. Siehe Accessible Disabled Buttons.
Das war nur in meinem Beispiel so. In meinem eigentlichen Script gibt es kein form-Element und auch keinen Button, da ist es ein a-Element, das ich als Button style.
Schöne Grüße
Nico
-
Moin Nico,
Keine so gute Idee. Buttons sollten nicht ausgeblendet oder deaktiviert werden. Siehe Accessible Disabled Buttons.
Das war nur in meinem Beispiel so. In meinem eigentlichen Script gibt es kein form-Element und auch keinen Button, da ist es ein a-Element, das ich als Button style.
und wie sind das
input-Element mit derdatalistund der Link verbunden?Die von @Gunnar Bittersmann genannten Argumente gelten unabhängig von der Architektur.
Viele Grüße
Robert -
Hallo Nico R.,
da ist es ein a-Element, das ich als Button style.
Ist es denn auch ein Link? Für Links und Buttons gibt es klar abgrenzbare Einsatzbereiche.
Rolf
--
sumpsi - posui - obstruxi-
Hallo nochmal,
ich antworte hier mal an alle bezüglich der semantischen Fragen. Man kann sich (vermutlich?) darüber streiten, ob es ein button oder ein link ist. Ich denke, tendenziell ists vielleiiiiicht eher ein button.
Nachdem man eine Person aus der datalist gewählt hat, erscheint der Button/Link über den man zu einem Formular geleitet wird, in dem es auf Grundlage des Werts entsprechende Voreintragungen gibt, die man dann erweitert, um einen Datensatz zu der Person anzulegen. Wird keine Person gefunden, kann auch kein Datensatz angelegt werden, der Button/Link wird dann also gar nicht benötigt.
Auf der Seite mit dem input-Feld gibt es neben der Grundstruktur eigentlich nur eine Überschrift, das input-Feld (type="search") inklusive datalist und den (unsichtbaren) Button. Ein umschließendes Element, etwa ein form, für input und button/link habe ich nicht für notwendig erachtet. Der Validator zeigt keine Fehler und auch keine Hinweise.
Dass ein Semantik-Experte der Meinung ist, ein Button sollte niemals ausgeblendet werden, ist mir in diesem Fall ehrlich gesagt egal. Ich halte meine Variante in diesem speziellen Fall für ein besseres Benutzererlebnis.
Schöne Grüße
Nico
-
@@Nico R.
Dass ein Semantik-Experte der Meinung ist, ein Button sollte niemals ausgeblendet werden, ist mir in diesem Fall ehrlich gesagt egal.
Das hat nichts mit Semantik zu tun, sondern mit Design.
Kwakoni Yiquan
--
Ad astra per aspera-
Moin Nico,
in Ergänzung zu
Dass ein Semantik-Experte der Meinung ist, ein Button sollte niemals ausgeblendet werden, ist mir in diesem Fall ehrlich gesagt egal.
Das hat nichts mit Semantik zu tun, sondern mit Design.
die Worte des Coca-Cola Chef-Designers:
Design is not how it looks, it how it works.
Viele Grüße
Robert-
@@Robert B.
die Worte des Coca-Cola Chef-Designers:
Design is not how it looks, it how it works.
War Steve Jobs zwischen Apple und Apple bei Coca-Cola? 🤔
Kwakoni Yiquan
--
Ad astra per aspera-
Moin Gunnar,
die Worte des Coca-Cola Chef-Designers:
Design is not how it looks, it how it works.
War Steve Jobs zwischen Apple und Apple bei Coca-Cola? 🤔
oder hat der Coca-Cola-Designer nicht richtig zitiert?
Viele Grüße
Robert -
Design is not how it looks, it how it works.
War Steve Jobs zwischen Apple und Apple bei Coca-Cola? 🤔
Nerdkorrektur: Zwischen Apple, NeXT und Apple ;-)
-
-
-
-
-
-
-