DataListとEnterキーイベント

Question

私はキーイベントをトリガーする入力テキストフィールドを持っています。入力時に、私は入力値で特定のコードを処理します。すべての作品は素晴らしいです。

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

しかし、今、私はこの入力にDataListコントロールを追加します。

HAML：

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

問題は、私は項目を選択するにはデータリストの上に移動したときに、私はEnterキーを押します。 Enterキーで、リスナーが呼び出され、入力の初期値でコードが処理されます。
このステップでは、フィールドの値は空です。その後、値はデータリストで選択された値に置き換えられます。

だから私の質問は以下のとおりです。

• は、Enterキーを押すことなく、データリスト選択した値によって、入力値を置き換えるためにデータリストの動作を変更する方法はありますか？ （データリストの入力キーを無効にする）

• データリストがアクティブ（または可視）で、EventListenerで異なる動作を処理するときを検出する方法はありますか？

Answer 1

Keypressイベントは、キーを押した後、データがフィールドに登録される前に発生します。 Keyupイベントは、キーを押した後に解雇されますが、データはフィールド

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/