click-Event auf datalist

[Robert B.]

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

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: script darf kein Kind von html sein, insbesondere darf es kein Nachfolger des body sein.

Viele Grüße
Robert