Событие изменения списка Jquery не срабатывает при прокрутке клавиатуры

Question

У меня есть простой список в форме HTML и этот очень простой код jQuery

    //Toggle visibility of selected item
    $("#selCategory").change(function() {
        $(".prashQs").addClass("hide");
        var cat = $("#selCategory :selected").attr("id");
        cat = cat.substr(1);
        $("#d" + cat).removeClass("hide");
    });

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

Есть ли причина для такого поведения? И какой обходной путь?

Answer 1

Событие onchange обычно не запускается, пока элемент не потеряет фокус. Вы также захотите использовать onkeypress. Может быть что-то вроде:

var changeHandler = function() {
    $(".prashQs").addClass("hide");
    var cat = $("#selCategory :selected").attr("id");
    cat = cat.substr(1);
    $("#d" + cat).removeClass("hide");
}

$("#selCategory").change(changeHandler).keypress(changeHandler);

Вам нужно, чтобы и onchange, и onkeypress учитывали взаимодействие мыши и клавиатуры соответственно.

Answer 2

Иногда поведение изменения может отличаться в зависимости от браузера, в качестве обходного пути вы можете сделать что-то вроде этого:

 //Toggle visibility of selected item
    $("#selCategory").change(function() {
        $(".prashQs").addClass("hide");
        var cat = $("#selCategory :selected").attr("id");
        cat = cat.substr(1);
        $("#d" + cat).removeClass("hide");
    }).keypress(function() { $(this).change(); });

Вы можете связать любые события по своему желанию и вручную запустить событие изменения.

IE:

var changeMethod = function() { $(this).change(); };
....keypress(changeMethod).click(changeMethod).xxx(changeMethod);

Answer 3

Поведение, которое вы описываете, событие изменения, вызываемое прокруткой клавиатуры в элементе select, на самом деле является ошибкой Internet Explorer. Спецификация DOM уровня 2 определяет событие change следующим образом:

Событие изменения происходит, когда элемент управления теряет фокус ввода и его значение был изменен с момента получения фокуса. Это событие действительно для INPUT, SELECT, и TEXTAREA. элемент.

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

$("#selCategory").keypress(function (e) { 
  var keyCode = e.keyCode || e.which; 
  if (keyCode == 38 || keyCode == 40) { // if up or down key is pressed
     $(this).change(); // trigger the change event
  } 
}); 

Посмотрите пример здесь ...

Answer 4

$('#item').live('change keypress', function() { /* code */ });

Answer 5

У меня была эта проблема с IE под JQuery 1.4.1 - события изменения в комбинированных окнах не запускались, если для внесения изменений использовалась клавиатура.

Кажется, было исправлено в JQuery 1.4.2.