Клавиши со стрелками Javascript onChange

Ok, поэтому мы все знаем, что onChange используется для выполнения кода javascript в инструкции select при изменении опции. Однако при изменении инструкции select с помощью клавиш со стрелками событие onChange не вызывается. Есть ли способ обойти это? Пожалуйста, помогите! Я ОКР, я знаю.

--EDIT 1--

только что проверил в IE и клавиши со стрелками не работают. По-видимому, это просто хром. ** Идет, чтобы проверить firefox

-- Edit 2 --

протестировано в Firefox и реализовано непосредственно перед ответом ниже говорилось о том, что для изменения требуется действие onBlur. Поэтому ответ здесь:

Internet Explorer распознает события onChange с клавиатуры, а также нажимает на них. Firefox и Chrome требуют, чтобы ключевые события сопровождались событием размытия для вызова onChange.

теперь обычно мне не нравится Internet Explorer, потому что это кусок мусора... Но я думаю, что ... .. к сожалению, должен сказать, что они есть право.

мое понимание относительно аргументации для события размытия в chrome и firefox заключается в экономии ресурсов, но я не согласен с этим. Я чувствую, что он должен следовать буквальной интерпретации команды onChange... Вздох... Хотя, наверное,я ошибаюсь.

8
arrow-keys javascript onchange

6 ответов

Я бы предложил вам написать необходимый код в Key Up event, чтобы захватить нажатие клавиши, а также проверить наличие кода ключа. Надеюсь, это поможет

4

прокрутка поля выбора не считается изменением. Изменение происходит, когда вы размываете () значение select и new option применяется к элементу select.

4

возвращаясь к этому, похоже, что с момента постановки этого вопроса Chrome теперь запускает onChange после ключевых событий. Firefox, похоже, все еще ждет onblur. http://jsfiddle.net/2aQBN/

$(document).ready(function() {
    $("#test").on("change", function() {
        console.log("Changed.");
    });
});

спецификация W3C, кажется, предлагают использовать событие.

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

однако ни одно входное событие не запускается в Chrome или Firefox для элемента select. (Просто входные элементы.)

тест, демонстрирующий текущее значение против последнего значения onchange.

http://jsfiddle.net/teynon/MpyHK/5/

Firefox изменит значение onmouseover. Ключевое изменение также изменит значение. Однако onchange не стрелял. Если форма отправляется в то время, когда пользователь имеет открытое меню выбрать, будет отправлена выделенная в данный момент опция.

от W3C:

если атрибут multiple отсутствует, а элемент не отключен, тогда агент пользователя должен позволить пользователю выбрать элемент в его список опций, который сам по себе не отключен. При этом варианте элемент выбирается (либо через щелчок, либо через Хилл элемент после изменения его значения, или через меню, или через любой другой механизм), и до соответствующего взаимодействия с пользователем событие ставится в очередь (например, перед событием click), агент пользователя должен установить в selectedness выбранного элемента параметр в значение true, а затем очередь задача запустить простое событие, которое пузыри с именем change на select элемент, используя источник задачи взаимодействия с пользователем в качестве источника задачи.

существует длинная дискуссия на https://bugzilla.mozilla.org/show_bug.cgi?id=126379 об этом многие люди просят клавиши со стрелками для работы. (И некоторые защищают подход onchange.)

некоторые пользователи предположили, что W3C является неправильным в спецификации для select элемент change событие. Вместо этого мы предлагаем внести изменения в спецификацию того, как мы ожидаем select ' s onchange функции для работы.

текущая функциональность явно не интуитивно понятный для большого количества людей, основанных исключительно на количестве сообщений об ошибках. (Mozilla имеет 40 помеченных как дубликаты.)

4

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

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

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

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

источник

2

Я думаю о чем-то вроде этого (чтобы не запускать событие, если значение не было изменено):

            select.keydown(function(){
                var _this = $(this);
                var _val = $(this).val();

                setTimeout(function(){    
                    if(_this.val() !== _val){
                        _this.trigger("change");
                    }
                }, 1);
            });
0

вот реализация этого запроса. Для краткости показываю только код. См.https://github.com/ida/skriptz/blob/master/js/fields/select/selection_changed.js для длинных объяснений в комментариях.

function addSelectionChangedListener(selectionEle, onChangeDoWithEle) {

  var selectedIndex = null

  function onChangeEvent(eve) {
    // If selection-change was caused of an option's click-event:
    if(eve.explicitOriginalTarget.tagName.toLowerCase() == 'option') {
      // We want to trigger passed event-handler:
      onChangeDoWithEle(eve.target)
    }
  }

  function onKeyEvent(eve) {

    // Key-event is keydown, remember current selectedIndex:
    if(eve.type == 'keydown') {
      selectedIndex = eve.target.selectedIndex
    }
    // Key-event is keyup, if selection changed, trigger passed handler:
    else if(selectedIndex != eve.target.selectedIndex) {
      onChangeDoWithEle(eve.target)
    }

  }

  selectionEle.onchange  = function(eve) onChangeEvent(eve)
  selectionEle.onkeydown = function(eve) onKeyEvent(eve)
  selectionEle.onkeyup   = function(eve) onKeyEvent(eve)

}
0