Событие Jquery Listbox Change не срабатывает при прокрутке клавиатуры

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

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

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


javascript jquery javascript-events
person Cyril Gupta    schedule 06.08.2009    source источник

Ответы (5)


arrow_upward
21
arrow_downward

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

person Justin Johnson    schedule 06.08.2009
comment
но я получил, что нажатие клавиши в этом случае не работает ни в одном браузере, кроме FireFox, я тестировал Chrome, Safari и IE и не работал. - person Amr Elgarhy; 02.07.2010
comment
Событие keypress не работало в Chrome, но keyup работало правильно - person Amir Ismail; 17.08.2011

arrow_upward
4
arrow_downward

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

 //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);
person Quintin Robinson    schedule 06.08.2009
comment
Вы правы, говоря, что это связано с несовместимостью между браузерами. - person Cyril Gupta; 06.08.2009

arrow_upward
1
arrow_downward

Описанное вами поведение, событие изменения, вызываемое прокруткой клавиатуры в выбранном элементе, на самом деле является ошибкой 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
  } 
});

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

person Christian C. Salvadó    schedule 06.08.2009
comment
Как я могу создать такое поведение в Firefox? Я хочу, чтобы мой контент обновлялся при изменении списка, пока фокус все еще находится на поле. - person Cyril Gupta; 06.08.2009
comment
+1 Я нашел решение, использующее событие keyup в дополнение к изменению. - person Cyril Gupta; 06.08.2009
comment
Обратите внимание, что keyup не будет вызываться, если нажата клавиша и удерживается до тех пор, пока клавиша не будет отпущена, браузер может прокручивать различные элементы в списке по мере нажатия клавиши. Я хотел бы убедиться, что это не окажет негативного влияния на любой код, который зависит от активных изменений. - person Quintin Robinson; 06.08.2009

arrow_upward
0
arrow_downward

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

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

person Jonathan Moffatt    schedule 15.07.2010

arrow_upward

arrow_downward

person    schedule
comment
live устарел. Вместо этого используйте on, а если вы не используете jQuery 1.7 или более позднюю версию, используйте delegate. - person James Allardice; 08.06.2012