click-Event auf datalist
bearbeitet von
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 [`datalist`](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Suchformulare#Suchvorschl.C3.A4ge_mit_datalist) mit [`select`](https://wiki.selfhtml.org/wiki/HTML/Elemente/select) verwechselst:
* `datalist` _erweitert_ ein `input` mit _Eingabevorschlägen_.
* `select` bietet eine _feste Auswahl_ an Eingabemöglichkeiten an.
In ein um eine `datalist` erweitertes `input` kö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](https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/input).
> 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](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/selectionchange_event):
Das ist experimentell!
> Hier mein Versuchsscript:
> <https://fsv-optik.de/tests/datalist.html>
Kleine Anmerkung hierzu: `script` darf kein Kind von `html` sein, insbesondere darf es kein Nachfolger des `body` sein.
Viele Grüße
Robert