Не срабатывает событие on input в IE9

346

09 марта 2017, 23:41

Есть обработчик событий:

$('.example_input').on('input', function(event) { 
    console.log('Input Event!');
});

Он должен срабатывать на любое изменение значения поля. Например: ввод символа, удаление символа (backspace, delete), ctrl-v и т.д.

Все срабатывает кроме удаления символов, а именно нажатие на клавиши backspace и delete.

В IE 11, Chrome, Opera, FF - всё работает. Есть какие-нибудь соображения по этому поводу?

И да, добавление события propertychange к on('input') не помогло.

Answer 1

Решил вопрос, добавлением обработчика keyup и принудительным trigger.

var keyCode = {
    DELETE: 46,
    BACKSPACE: 8
};
$('.example_input').on('input', function(event) { 
    console.log('Input Event!');
});

$('.example-input').keyup(function(event) {
    switch(event.keyCode) {
        case keyCode.BACKSPACE:
            $('.example-input').trigger("input")
            break;
        case keyCode.DELETE:
            $('.example-input').trigger("input")
            break;
        default:
            break;
    }
});

Answer 2

По известной только разработчикам IE9 при удалении внутри текстового поля происходит событие selectionchange. Ниже функция, позволяющая решить эту проблему.

  (function (d) {
  if (navigator.userAgent.indexOf('MSIE 9') === -1) return;
  d.addEventListener('selectionchange', function() {
    var el = d.activeElement;
    if (el.tagName === 'TEXTAREA' || (el.tagName === 'INPUT' && el.type === 'text')) {
      var ev = d.createEvent('CustomEvent');
      ev.initCustomEvent('input', true, true, {});
      el.dispatchEvent(ev);
    }
  });
})(document);

Подробнее http://stackoverflow.com/questions/6382389/oninput-in-ie9-doesnt-fire-when-we-hit-backspace-del-do-cut