jquery - change - tooltip html

jQuery ''input'' event

Question

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

¿Sabes por qué está funcionando? ¿Es un alias para keyup o algo así?

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

Answer 1

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

No es un alias para keyup porque la keyup se disparará incluso si la tecla no hace nada (por ejemplo: al presionar y luego soltar la tecla Control, se desencadenará un evento de keyup ).

Una buena forma de pensar es así: es un evento que se dispara cada vez que cambia la entrada. Esto incluye, pero no se limita a, presionar teclas que modifican la entrada (por lo que, por ejemplo, Ctrl por sí mismo no desencadenará el evento, pero Ctrl-V para pegar texto), seleccionando una opción de autocompletado, Haga clic con el botón central del estilo de Linux, arrastre y suelte, y muchas otras cosas más.

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

Answer 2

Como dijo claustrofob, oninput es compatible con IE9 +.

this , "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 forma similar al evento oninput, también es defectuoso, no se dispara en la eliminación.

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

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

Answer 3

Creo que la ''entrada'' simplemente funciona aquí de la misma manera que ''oninput'' en el modelo de evento DOM Level O.

De paso:

Tal como lo comentó silkfire, también busqué en Google el ''evento de entrada de jQuery''. Por lo tanto, fui guiado hasta aquí y asombrado al saber que ''entrada'' es un parámetro aceptable para el comando bind () de jquery. En jQuery in Action (página 102, edición de 2008), ''entrada'' no se menciona como un posible evento (contra otros 20, desde ''desenfoque'' hasta ''descarga''). Es cierto que, en la p. 92, podría conjeturarse lo contrario de la relectura (es decir, a partir de una referencia a diferentes identificadores de cadena entre los modelos de Nivel 0 y Nivel 2). Eso es bastante engañoso.

Answer 4

Tenga cuidado al usar INPUT. Este evento se desencadena en foco y en borrosidad en IE 11. Pero se desencadena por cambios en otros navegadores.

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

Answer 5

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

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

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

Por lo tanto, esperas 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 en el #container antes de que se #container su #container al DOM), esto debería venir a la mente:

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

Tristemente, una vez más, ¡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(); });

NOW WORKS también, en todos los navegadores "estándar".

Answer 6

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

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

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

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

Mozilla declara lo siguiente sobre el evento de entrada:

El evento de entrada DOM se dispara sincrónicamente cuando se cambia el valor de un elemento o. Además, se activa en editores contentos cuando se modifican sus contenidos.

Answer 7

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

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

Entonces puedes usarlo de esta manera:

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

Tener un soporte completo con navegador cruzado.

Dado que el cambio de propiedad se puede activar para CUALQUIER cambio de propiedad, por ejemplo, la propiedad deshabilitada se cambia, y luego 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 */
    }
});

Answer 8

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

trabajando en IE y Chrome