Evento 'input' de jQuery

Nunca he oído hablar de un evento en jQuery llamado inputhasta que vi este jsfiddle .

¿Sabes por qué está funcionando? ¿Es un alias keyupo algo así?

$(document).on('input', 'input:text', function() {});

Se produce cuando el contenido de texto de un elemento se cambia a través de la interfaz de usuario.

No es exactamente un alias keyupporque keyupse disparará incluso si la tecla no hace nada (por ejemplo: presionar y luego soltar la tecla Control activará un keyupevento).

Una buena manera de pensarlo es así: es un evento que se activa cada vez que cambia la entrada. Esto incluye, pero no se limita a, presionar teclas que modifican la entrada (por lo tanto, por ejemplo, Ctrlpor sí solo no activará el evento, pero Ctrl-Vpara pegar algo de texto lo hará), seleccionando una opción de autocompletar, medio de estilo Linux -Haga clic en pegar, arrastrar y soltar, y muchas otras cosas.

Vea esta página y los comentarios sobre esta respuesta para más detalles.

oninput El evento es muy útil para rastrear los cambios en los campos de entrada.

Sin embargo, no es compatible con IE versión <9. Pero las versiones anteriores de IE tienen su propio evento propietario onpropertychangeque hace lo mismo que oninput.

Entonces puedes usarlo de esta manera:

$(':input').on('input propertychange');

Para tener un soporte completo de crossbrowser.

Dado que el cambio de propiedad se puede activar para CUALQUIER cambio de propiedad, por ejemplo, la propiedad deshabilitada se cambia, entonces desea incluir esto:

$(':input').on('propertychange input', function (e) {
    var valueChanged = false;

    if (e.type=='propertychange') {
        valueChanged = e.originalEvent.propertyName=='value';
    } else {
        valueChanged = true;
    }
    if (valueChanged) {
        /* Code goes here */
    }
});

Usando jQuery, los siguientes son idénticos en efecto:

$('a').click(function(){ doSomething(); });
$('a').on('click', function(){ doSomething(); });

Con el inputevento, sin embargo, solo el segundo patrón parece funcionar en los navegadores que he probado.

Por lo tanto, esperaría que esto funcione, pero NO (al menos actualmente):

$(':text').input(function(){ doSomething(); });

Una vez más, si desea aprovechar la delegación de eventos (por ejemplo, para configurar el evento #containerantes de que input.textse agregue al DOM), debe tener esto en cuenta:

$('#container').on('input', ':text', function(){ doSomething(); });

Lamentablemente, de nuevo, ¡NO funciona actualmente!

Solo este patrón funciona:

$(':text').on('input', function(){ doSomething(); });

EDITADO CON MÁS INFORMACIÓN ACTUAL

Ciertamente puedo confirmar que este patrón:

$('#container').on('input', ':text', function(){ doSomething(); });

AHORA FUNCIONA también, en todos los navegadores 'estándar'.

Como dijo claustrofob, oninput es compatible con IE9 +.

Sin embargo , "El evento oninput tiene errores en Internet Explorer 9. No se activa cuando los caracteres se eliminan de un campo de texto a través de la interfaz de usuario solo cuando se insertan caracteres. Aunque el evento onpropertychange es compatible con Internet Explorer 9, pero de manera similar a evento de entrada, también tiene errores, no se dispara al borrar.

Dado que los caracteres se pueden eliminar de varias maneras (teclas Retroceso y Eliminar, CTRL + X, comando Cortar y Eliminar en el menú contextual), no hay una buena solución para detectar todos los cambios. Si el comando Eliminar del menú contextual elimina los caracteres, la modificación no se puede detectar en JavaScript en Internet Explorer 9. "

Tengo buenos resultados vinculados tanto a la entrada como al keyup (y keydown, si desea que se active en IE mientras mantiene presionada la tecla Retroceso).

Tenga cuidado al usar INPUT. Este evento se dispara en foco y en desenfoque en IE 11. Pero se desencadena al cambiar en otros navegadores.

https://connect.microsoft.com/IE/feedback/details/810538/ie-11-fires-input-event-on-focus

Creo que 'input' simplemente funciona aquí de la misma manera que 'oninput' lo hace en el modelo de evento DOM Nivel O.

De paso:

Justo cuando silkfire lo comentó, yo también busqué en Google 'jQuery input event'. Por lo tanto, me condujo hasta aquí y me sorprendió saber que 'input' es un parámetro aceptable para el comando bind () de jquery . En jQuery in Action (p. 102, 2008 ed.) 'Entrada' no se menciona como un posible evento (contra otros 20, desde 'desenfoque' hasta 'descarga'). Es cierto que, en la pág. 92, se podría suponer lo contrario de la relectura (es decir, de una referencia a diferentes identificadores de cadena entre los modelos de Nivel 0 y Nivel 2). Eso es bastante engañoso.

jQuery tiene la siguiente firma para el .on()método:.on( events [, selector ] [, data ], handler )

Los eventos pueden ser cualquiera de los enumerados en esta referencia:

https://developer.mozilla.org/en-US/docs/Web/Events

Sin embargo, no todos son compatibles con todos los navegadores.

Mozilla establece lo siguiente sobre el evento de entrada:

El evento de entrada DOM se dispara sincrónicamente cuando se cambia el valor de un elemento. Además, se dispara a editores contentos cuando se cambia su contenido.

$("input#myId").bind('keyup', function (e) {    
    // Do Stuff
});

trabajando tanto en IE como en Chrome