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

问题是当我在datalist上导航以选择项目时,我按下回车键.在输入键时,我的侦听器被调用并使用输入的初始值处理我的代码.
在此步骤中,该字段的值为空.之后,该值将替换为datalist中选择的值.

所以我的问题是:

• 有没有办法改变数据列表的行为,用datalist选择的值替换输入值而不按回车键？(禁用datalist的输入键)

• 有没有办法检测datalist何时处于活动状态(或可见状态)以处理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/