DataList i Enter Key Event

Question

Mam pole tekstowe, w którym wyzwalam zdarzenie kluczowe. Przy wprowadzaniu przetwarzam określony kod z wartością wejściową. Wszystko działa świetnie.

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); 

Ale teraz chcę dodać DataList na tym wejściu.

haml:

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

Problemem jest to, kiedy nawigacja na DataList, aby wybrać pozycję, naciskam klawisz Enter. Na klawiszu enter, mój detektor jest wywoływany i przetwarza mój kod z początkową wartością wejścia.
W tym kroku wartość pola jest pusta. Po tym wartość zostaje zastąpiona wartością wybraną w bazie danych.

Więc moje pytania to:

• Czy istnieje sposób, aby zmienić zachowanie datalist zastąpić wartość wejściowego przez DataList wybranej wartości bez naciskania przycisku enter? (Wyłącz klawisz Enter dla danych)

• Czy istnieje sposób na wykrycie, kiedy datalista jest aktywny (lub widoczny), aby przetworzyć inne zachowanie w moim EventListener?

Answer 1

Keypress zdarzenie zostanie zwolniony po naciśnięciu klawisza ale zanim dane zostaną zarejestrowane w polu. Keyup zdarzenie zostanie zwolniony po naciśnięciu przycisku, ale po dane jest zarejestrowany w polu

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); 

http://jsfiddle.net/5p6FZ/