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

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

16 голосов
/ 17 июня 2011

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

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

Ответы [ 4 ]

9 голосов
/ 04 сентября 2015

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

(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!

3 голосов
/ 25 августа 2012

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

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

Я добавил специальный файл JavaScript JavaScript с именем 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 голосов
/ 08 декабря 2012

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

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

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

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

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

...