DataList-und Enter-Taste Veranstaltung

Ich habe ein input-text-Feld, auf dem ich die trigger-Taste-Ereignis. Auf enter, Prozess-spezifischen code mit der Eingabe-Wert. Funktioniert alles Super.

HAML:

%input#myField{:type => "text"}

JavaScript:

my_field = document.getElementById('myField');

my_field.addEventListener("keypress", function (event) {
    if (event.keyCode == 13) {
        event.preventDefault();

        if (tag_field.value.length != 0) {
            console.log(my_field.value);
            //Run my specific process with my_field.value 
            my_field.value = '';
        }
    }
}, false);

Aber jetzt möchte ich hinzufügen datalist an diesem Eingang.

HAML:

%input#myField{:list => "htmlList", :type => "text"}
%datalist#htmlList
    %option{:value => "toto"} toto
    %option{:value => "foo"} foo

Das problem ist, wenn ich navigieren auf datalist, um ein Element auszuwählen, drücken Sie die enter-Taste.
Auf die enter-Taste, mein listener wird aufgerufen und verarbeitet mein code mit dem ersten Wert der Eingabe.

Bei diesem Schritt wird der Wert des Feldes leer ist. Nach, der Wert ersetzt wird, der ausgewählte Wert in der datalist.

Also meine Fragen sind:

Gibt es eine Möglichkeit, ändern Sie das Verhalten des datalist-Steuerelements zu ersetzen, die input-Wert durch das datalist ausgewählten Wert ohne drücken der enter-Taste? (Deaktivieren Sie die enter-Taste für das datalist)
Gibt es eine Möglichkeit zu erkennen, wenn die Datenliste aktiv ist (oder sichtbar) zu verarbeiten, ein anderes Verhalten als in meinem EventListener ?

reden wir über sowas? davidwalsh.name/demo/datalist.php
Ja. Zum Beispiel : nach Eingabe von "mo", i wählen Sie ein element in der Liste und überprüfen die Eingabe auf enter. Auf diesen Schritt habe ich trigger mein Hörer, aber die Eingabe-Wert ist immer noch "mo".

InformationsquelleAutor Naremy | 2013-04-21

Keypress event ausgelöst wird, nachdem Sie die Taste drücken, aber bevor die Daten eingetragen werden in das Feld.
Keyup event ausgelöst wird, nachdem Sie die Taste drücken, aber nachdem die Daten eingetragen werden in das Feld

HTML:

<input list="browsers" id="myField"/>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
</datalist>

JS:

var my_field = document.getElementById('myField');

      my_field.addEventListener("keyup", function (event) {
          if (event.keyCode == 13) {
              event.preventDefault();

              if (my_field.value.length != 0) {
                  console.log(my_field.value);
                  //Run my specific process with my_field.value 
                  my_field.value = '';
              }
          }
      }, false);