javascript - la entrada en IE9 no se dispara cuando presionamos RETROCESO/DEL/hacer CORTE

html5 internet-explorer-9

Question

¿Cuál es la solución más limpia que usamos para superar el problema de que IE9 no dispara el evento de entrada cuando presionamos RETROCESO / DEL / hacer CORTE?

Por más limpio quiero decir que el código no apesta .

Answer 1

Desarrollé un polyfill IE9 para el retroceso / eliminar / cortar.

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

Por alguna razón, en IE9, cuando elimina dentro de un campo de texto, se activa el evento selectionchange .

Por lo tanto, lo único que debe hacer es: verificar si el elemento activo de la selección es una entrada, y luego le digo al elemento que envíe el evento de input , como debería ser.

¡Coloque el código en cualquier lugar de su página y todas las acciones de eliminación activarán el evento de input !

Answer 2

IE9 no dispara el evento oninput cuando los caracteres se eliminan de un campo de texto con la tecla de retroceso, la tecla de eliminar, el comando de corte o el comando de eliminar del menú contextual. Puede solucionar el problema de la tecla de retroceso / eliminar mediante el seguimiento en keyup. También puede solucionar el problema del comando de corte realizando un seguimiento en el corte. Pero la única forma que he encontrado para solucionar el comando de eliminación de contexto es usar el evento onselectionchange. Afortunadamente, si usa onselectionchange no tendrá que realizar un seguimiento de oncut o onkeyup.

Aquí hay un código de ejemplo basado en esta técnica que he escrito sobre :

<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 3

Puedes probar html5Forms (anteriormente html5widgets)

Como odio COBOL, decidí actualizar mi biblioteca html5Widgets para:

1. Agregue soporte para oninput para los navegadores que no lo admiten (por ejemplo, IE7 y 8)
2. Obliga a IE9 a activar la entrada de un formulario cuando se presionan las teclas de retroceso y eliminación dentro de cualquiera de los nodos de entrada.
3. Forzar IE9 para activar la entrada de un formulario cuando el evento de corte se activa en cualquiera de los nodos de entrada.

here hay un enlace a la confirmación que agrega este soporte.

Answer 4

Yo tuve el mismo problema. El evento oninput se activa para el retroceso, del, etc. en Chrome y FF pero no en IE9.

Sin embargo, ese OnKeyUp realmente activa el retroceso, etc. en IE9 pero no en Chrome FF, por lo contrario.

Agregué un archivo javascript de IE específico llamado ieOverrides.js:

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

Luego en el archivo js cambié los controladores de eventos:

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

Espero que ayude.