DataList 和 Enter 键事件答案

【问题标题】：DataList and Enter Key EventDataList 和 Enter 键事件
【发布时间】：2015-03-15 12:38:05
【问题描述】：

我有一个触发按键事件的输入文本字段。输入时，我使用输入值处理一些特定代码。一切都很好。

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

但现在我想在这个输入上添加数据列表。

HAML：

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

问题是当我在 datalist 上导航以选择一个项目时，我按了 enter 键。在输入键上，我的侦听器被调用并使用输入的初始值处理我的代码。
在这一步，该字段的值为空。之后，该值将替换为在数据列表中选择的值。

所以我的问题是：

有没有办法改变 datalist 的行为，在不按 enter 键的情况下用 datalist 选择的值替换输入值？（禁用数据列表的输入键）
有没有办法检测数据列表何时处于活动状态（或可见）以处理我的 EventListener 中的不同行为？

【问题讨论】：

我们在谈论这样的事情吗？ davidwalsh.name/demo/datalist.php
是的。例如：输入“mo”后，我在列表中选择一个元素并验证输入。在这些步骤中，我触发了我的侦听器，但输入值仍然是“mo”。

标签： javascript html html-datalist

【解决方案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/

【讨论】：

有没有办法完全阻止keyup事件？