javascript onchange против событий onkeyup для меню <Select>(клавиши «Вверх» и «Вниз» не запускают событие onchange в Firefox)

Question

У меня есть <select id="myselect" name="myselect" onChange="(myfunction();)">...</select>, который прекрасно работает в IE и Opera. Слово «совершенный» означает событие, которое возникает при изменении значений из раскрывающегося списка с помощью мыши или любого из «Вверх», «Вниз», «PageUp» (не для Opera), «PageDown» (не для Opera) , Клавиши «Домой» и «Конец» при активном меню выбора (синие). Проблема появляется при тестировании с использованием Firefox, 3.6.Xv. Ничего не происходит, когда вы используете «Вверх» и «Вниз», но для мыши все равно работает. Вы рекомендуете использовать событие onkeyup? Я пробовал, он «ловит» вверх и вниз, но, похоже, IE имеет и onChange и onkeyup событие. Но мне нужно только одно мероприятие. Как люди решают эту проблему?

Спасибо.

Answer 1

Это довольно грязный хак, но вы можете принудительно вызвать событие change, выполнив следующее:

element.addEventListener('keyup', function(evt){
    evt.target.blur();
    evt.target.focus();
}, false);

Таким образом, вы также зарегистрируете прослушиватель событий для change, и эта функция будет вызываться, когда пользователь нажимает клавишу на <select> с помощью кода выше.

Возможно, вы захотите охватить это только Firefox, но AFAIK вам придется использовать UA sniffing для этого, так что вам решать, если это приемлемо.

Источник

Answer 2

Я рекомендую вам продолжать использовать событие change. Реализация Firefox имеет большой смысл для пользователей клавиатуры. Если вы перейдете к элементу select и выберете запись с помощью клавиш «Вверх» и «Вниз» (и вам придется многократно нажимать их для длинного списка), вы не захотите запускать множество действий на веб-странице. Можно выполнить действие после того, как вы выбрали правильную запись и перешли к чему-то другому.

Answer 3

Вы можете быть умным и создать свой собственный обработчик для события keyup, которое проверяет код клавиши, чтобы увидеть, была ли это стрелка вверх или стрелка вниз, и соответственно запускает событие изменения.

Мой собственный js недостаточно хорош, чтобы написать вам пример, но я мог бы показать несколько примеров jQuery для этого:

$('yourSelect').keyup(function(e)
{

    if (e.keyCode===38)
    {
        //this is an up arrow press

        //trigger the change event
        $('yourSelect').change();
    }
    else if (e.keyCode===40)
    {
        //down arrow has pressed

        //trigger the change event
        $('yourSelect').change();
    }
});