JQuery Listbox Изменение события не срабатывает при прокрутке клавиатуры

У меня есть простой Listbox в 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");
    });

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

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

Ответы

Ответ 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 учитывали как взаимодействие с мышью, так и клавиатурой соответственно.

Ответ 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);

Ответ 3

Поведение, которое вы описываете, запуск события изменения с помощью прокрутки клавиатуры в элементе select, на самом деле является ошибкой Internet Explorer. спецификация DOM Level 2 Event определяет событие 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
  } 
});

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

Ответ 4

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

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

Ответ 5

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