DropDown-Liste für Textfeld, Script dafür funktioniert nicht 100%ig

[du-doch-nicht]

Guten Morgen,

vorab möchte ich euch erläutern was das Script machen soll.

Wenn ich das Textfeld anklicke, soll darunter eine Liste mit alternativen Eingabemöglichkeiten erscheinen (ähnlich wie das HTML5 Tag "datalist") die der Benutzer wählen kann und im Textfeld übernommen wird, die Liste schließt nach Eingabe automatisch. Der Benutzer hat aber auch die Freiheit, etwas anderes ins Textfeld einzugeben. Beim verlassen des Textfeldes wird die Liste automatisch geschlossen.


Warum nicht Datalist?

Ein paar entscheidende Dinge funktionieren nicht, wie ich es mir vorstelle. Wenn eine Eingabe im Textfeld exisitiert und ich mich doch für eine andere Eingabe aus der Liste entscheide, erscheint keine Liste. Erst nachdem ich die Eingabe aus dem Feld lösche und Doppelklick auf das Inputfeld tätige erscheint die Liste und kann etwas auswählen. Desweiteren ist "datalist" sehr unfelexibel wenn es um CSS-Anpassungen geht.


Meine Frage:

Das "setTimeOut" soll die onBlur-Aktion verzögern, da meine Liste ausserhalb des Textfeldes liegt und ich sonst keine Auswahl anklicken kann, weil sonst die Liste sofort verschwindet wenn ich etwas anklicken möchte. Das "setTimeOut" gibt mir eine gewisse Zeit dennoch eine Auswahl anzuklicken bevor die Liste schließt .

[ ! ] Ich habe aber gemerkt, wenn man langsam den Link in der Liste klickt, wird die Auswahl nicht ins Textfeld übernommen. Langsam in dem Fall, wenn man die Auswahl mit der Maus anklickt, aber in den 200ms die Maustaste nicht loslässt, wird die Auswahl nicht übernommen.

• Gibt es für "setTimeOut" eine alternative?

• Wie kann das Script umgeschrieben werden, damit es zu 100% funktioniert?

• Das Script wird im Intranet eingesetzt und muss nicht Barrierefrei sein.

Ich kenn mich mit Javascript noch nicht so gut aus. Wäre sehr dankbar für eure Hilfe


Live-Quellcode: http://jsfiddle.net/YdSy6/

 

[ComFreek]

Hallo du-doch-nicht,

statt onclick habe ich das onmousedown-Event benutzt: http://jsfiddle.net/YdSy6/5/
Funktioniert es so nach deinen Wünschen?


PS: Du solltest keine Inline-Eventhandler benutzen. Lieber addEventListener() in JavaScript, das hält den Code sauberer und hat einige weitere Vorteile.

 

[du-doch-nicht]

Hallo ComFreek,

danke für deine Antwort, dieser EventHandler behebt diesen Fehler. Ich hab gleich die Zeit von "setTimeOut" auf 50 gestellt.
Ich war schon kurz vorm verzweifeln und hab die wildesten Codes gebastelt um das hinzubekommen :-D.

Es sollen mehrere Textfelder mit einer DropDown-Liste ausgestattet werden, da kann die DIV-ID doch nur mithilfe der Inline-EventHandler gehändelt werden?
Oder wie soll das sonst funktionieren wenn ich addEventListener() benutze und die verschiedenen ID's übermittle?

 

[ComFreek]

Du musst gar nichts dem Eventhandler übergeben, denn standardmäßig bekommt dieser das Referenzelement (von dem das Event ausging) schon übergeben. Im Speziellen ist dies der Kontext in der Callback-Funktion ('this').

Dann kannst du auf das Element zugreifen und jegliche Daten, die in dem Element gespeichert sind (z. B. Text oder data-Attribute), auslesen.

Beispiel:
jsFiddle

<button id="myBtn" data-text="Hello World!">Click me</button>
<button id="myBtn2" data-text="I am button #2!">Click me 2</button>

function clickHandler(evt) {
  alert(this.dataset.text);
}

document.getElementById("myBtn").addEventListener("click", clickHandler);
document.getElementById("myBtn2").addEventListener("click", clickHandler);