Таблицы и введите ключевое событие

У меня есть входное текстовое поле, в котором я запускаю ключевое событие. При вводе я обрабатываю некоторый конкретный код с входным значением. Все работает отлично.

ХАМЛ: 

%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 на этот вход.

ХАМЛ: 

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

Проблема в том, что когда я перемещаюсь по datalist, чтобы выбрать элемент, я нажимаю клавишу enter. При нажатии клавиши enter вызывается мой прослушиватель и обрабатывает мой код с начальным значением вход.
На этом шаге значение поля пусто. После этого значение заменяется значением, выбранным в datalist.

Итак, мои вопросы таковы:

  • Есть ли способ изменить поведение datalist, чтобы заменить входное значение на выбранное значение datalist без нажатия клавиши enter? (Отключить клавишу enter для datalist)

  • Есть ли способ определить, когда datalist активен( или виден), чтобы обработать другое поведение в моем EventListener ?

1 8
javascript html5 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/

3