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

Question

Какое самое чистое решение мы используем для преодоления проблемы, заключающейся в том, что IE9 не запускает событие ввода, когда мы нажимаем BACKSPACE / DEL / do CUT?

Под чистым я имею в виду код не воняет.

Answer 1

Я разработал полифилл IE9 для возврата / удаления / вырезания.

(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 событие!

Answer 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);
    });
});

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

Answer 3

IE9 не запускает событие oninput, когда символы удаляются из текстового поля с помощью клавиши возврата, клавиши удаления, команды вырезания или команды удаления из контекстного меню. Вы можете обойти проблему возврата / удаления ключа, отслеживая onkeyup. Вы также можете обойти проблему команды нарезки, отследив 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>

Answer 4

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

Так как я ненавижу COBOL, я решил обновить мою библиотеку html5Widgets, чтобы:

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

вот ссылка на коммит, который добавляет эту поддержку