Danh sách dữ liệu và nhập sự kiện quan trọng

Question

Tôi có trường nhập văn bản mà tôi kích hoạt sự kiện quan trọng. Khi nhập, tôi xử lý một số mã cụ thể với giá trị đầu vào. Tất cả các công trình lớn.

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

Nhưng bây giờ tôi muốn thêm datalist trên đầu vào này.

HAML:

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

Vấn đề là khi tôi di chuyển trên datalist để chọn một mục, tôi nhấn phím Enter. Khi nhập khóa, trình nghe của tôi được gọi và xử lý mã của tôi với giá trị đầu vào ban đầu.
Ở bước này, giá trị của trường trống. Sau đó, giá trị được thay thế bằng giá trị được chọn trong datalist.

Vì vậy, câu hỏi của tôi là:

• Có cách nào để thay đổi hành vi của datalist để thay thế các giá trị đầu vào của datalist giá trị được lựa chọn mà không cần nhấn phím Enter? (Vô hiệu khóa nhập cho trình dữ liệu)

• Có cách nào để phát hiện khi trình dữ liệu đang hoạt động (hoặc hiển thị) để xử lý một hành vi khác trong EventListener của tôi không?

Answer 1

Keypress sự kiện sẽ được kích hoạt sau khi bạn nhấn phím nhưng trước khi dữ liệu được đăng ký vào trường. Keyup kiện này sẽ bị sa thải sau khi bạn bấm phím nhưng sau khi dữ liệu được đăng ký vào lĩnh vực này

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/