DataList e tasto Invio evento

Question

Ho un campo di testo di input su cui faccio scattare l'evento chiave. All'accesso, elaboro un codice specifico con il valore di input. Tutto funziona alla grande.

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

Ma ora voglio aggiungere datalist su questo ingresso.

HAML:

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

Il problema è quando navigo su datalist per selezionare una voce, si preme il tasto Invio. Sulla chiave di invio, il mio ascoltatore viene chiamato e processa il mio codice con il valore iniziale di input.
In questo passaggio, il valore del campo è vuoto. Dopo, il valore viene sostituito dal valore selezionato nel datalist.

Quindi le mie domande sono:

• C'è un modo per cambiare il comportamento del DataList per sostituire il valore di ingresso per il valore selezionato datalist senza premere il tasto enter? (Disabilitare il tasto invio per il datalist)

• C'è un modo per rilevare quando il datalist è attivo (o visibile) per elaborare un comportamento diverso nel mio EventListener?

Answer 1

Keypress evento verrà licenziato dopo aver premuto il tasto, ma prima che i dati è registrata nel campo. Keyup evento verrà licenziato dopo aver premuto il tasto, ma dopo che i dati è stato registrato nel campo

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/