Oninput в IE9 не срабатывает, когда мы нажимаем BACKSPACE/DEL/do CUT

Ответ 1

Я разработал IE9 polyfill для backspace/delete/cut.

(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);

По какой-то причине в IE9, когда вы удаляете внутри текстового поля, запускается событие selectionchange.

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

Поместите код на любую страницу, и все действия по удалению теперь вызовут событие input!

Ответ 2

У меня была та же проблема. Событие oninput запускается для backspace, del и т.д. В Chrome и FF, но не в IE9.

Однако, OnKeyUp действительно запускает backspace, del и т.д. в IE9, но не в Chrome FF, так что наоборот.

Я добавил конкретный файл javascript IE с именем ieOverrides.js:

<!--[if IE 9]>
    <script type="text/javascript" src="js/ui/ieOverrides.js"></script>
<![endif]-->

Затем в файле js я переключил обработчики событий:

$(document).ready(function(){
    $("#search").off('input');
    $("#search").on('keyup', function(){
        search(this.value);
    });
});

Надеюсь, что это поможет.

Ответ 3

IE9 не запускает событие oninput, когда символы удаляются из текстового поля с помощью клавиши backspace, клавиши удаления, команды вырезания или команды удаления из контекстного меню. Вы можете обойти проблему backspace/delete, отслеживая onkeyup. Вы также можете обойти проблему командной строки cut путем отслеживания oncut. Но единственным способом, который я нашел для решения команды удаления контекста, является использование события onselectionchange. К счастью, если вы используете onselectionchange, вам не придется отслеживать oncut или onkeyup.

Вот пример кода, основанного на этом методе Я писал о:

<input id="myInput" type="text">

<script>
  // Get the input and remember its last value:
  var myInput = document.getElementById("myInput"), 
      lastValue = myInput.value;

  // An oninput function to call:
  var onInput = function() {
    if (lastValue !== myInput.value) { // selectionchange fires more often than needed
      lastValue = myInput.value;
      console.log("New value: " + lastValue);
    }
  };

  // Called by focus/blur events:
  var onFocusChange = function(event) {
    if (event.type === "focus") {
      document.addEventListener("selectionchange", onInput, false);
    } else {
      document.removeEventListener("selectionchange", onInput, false);
    }
  };

  // Add events to listen for input in IE9:
  myInput.addEventListener("input", onInput, false);
  myInput.addEventListener("focus", onFocusChange, false);
  myInput.addEventListener("blur", onFocusChange, false);
</script>

Ответ 4

вы можете попробовать html5Forms (ранее html5widgets)

Поскольку я ненавижу COBOL, я решил обновите мою библиотеку html5Widgets до:

• Добавьте поддержку oninput для браузеров, которые не поддерживают ее (например, IE7 и 8)
• Заставить IE9 запускать формы при входе, когда клавиши backspace и delete нажата внутри любого из входных узлов.
• Заставить IE9 запускать формы oninput, когда событие cut вызывается на любом из входных узлов.

здесь является ссылкой на фиксацию, которая добавляет эту поддержку