Diferencia entre el evento "cambio" y "entrada" para un elemento "entrada"

108

¿Alguien puede decirme cuál es la diferencia entre changeinput eventos y ?

Estoy usando jQuery para agregarlos:

$('input[type="text"]').on('change', function() {
    alert($(this).val());
})

También funciona con input lugar de change.

¿Quizás alguna diferencia en el orden del evento en relación con el enfoque?

— Gabriel Petrovay
fuente

rakshasingh.weebly.com/1/post/2012/12/… Tenga en cuenta que oninput no es compatible con navegadores antiguos. Puede usar entonces: onchange, onpaste y onkeyup como solución alternativa. PD: el evento oninput también tiene errores en IE9 y no se activa al eliminarlo.

— A. Wolff

la entrada se activa con más frecuencia, como después de presionar una tecla, mientras que el cambio básicamente se activa cuando la entrada está borrosa y el valor no es el que era cuando se enfocó la entrada.

— dandavis

El inputevento también captura el pegado. Ver stackoverflow.com/questions/15727324/…

— Antony

TLDR: ingrese disparos mientras escribe, cambie el fuego cuando haga clic en el exterior

— Muhammad Umer

Respuestas:

117

Según esta publicación :

oninput El evento ocurre cuando el contenido de texto de un elemento se cambia a través de la interfaz de usuario.
onchangeocurre cuando la selección, el estado verificado o el contenido de un elemento han cambiado . En algunos casos, solo ocurre cuando el elemento pierde el foco o al presionar return(Enter) y se ha cambiado el valor. El atributo onchange se puede utilizar con: <input>, <select>, y <textarea>.

TL; DR:

oninput: cualquier cambio realizado en el contenido del texto
onchange:
- Si es un <input /> : cambiar + perder el enfoque
- Si es una <select>opción: cambiar

$("input, select").on("input", function () {
    $("pre").prepend("\nOn input. | " + this.tagName + " | " + this.value);
}).on("change", function () {
    $("pre").prepend("\nOn change | " + this.tagName + " | " + this.value);
}).on("focus", function () {
    $("pre").prepend("\nOn focus | " + this.tagName + " | " + this.value);
}).on("blur", function () {
    $("pre").prepend("\nOn blur | " + this.tagName + " | " + this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
<select>
  <option>Alice</option>
  <option>Bob</option>
  <option>Carol</option>
  <option>Dave</option>
  <option>Emma</option>
</select>
<pre></pre>

Expandir fragmento

— Ionică Bizău
fuente

Todavía no tengo claro la diferencia entre los dos. Suenan muy similares a sus descripciones.

— Justin Morgan

@JustinMorgan Como en el ejemplo de JSFiddle, onchangeocurre "cuando el elemento pierde el foco" mientras que oninputocurre en cada cambio de texto.

— Ionică Bizău

La diferencia es que el evento oninput ocurre inmediatamente después de que el valor de un elemento ha cambiado, mientras que onchange ocurre cuando el elemento pierde el foco, después de que se ha cambiado el contenido.

— NinoLopezWeb

En otras palabras, la "entrada" se activa inmediatamente cuando se cambia, elimina o agrega cualquier carácter mientras que el "cambio" se evalúa después de que el control pierde el foco y ocurre solo cuando el valor ha cambiado

— Adam Moszczyński

Intenté con Chrome. onchangetambién se activa cuando presiona Enter mientras aún enfoca.

— Rick

Se change eventactiva en la mayoría de los navegadores cuando se cambia el contenido y se pierde el elemento focus. Básicamente es un agregado de cambios. No disparará para cada cambio como en el caso input event.
Se input eventdispara sincrónicamente al cambiar el contenido del elemento. Como tal, el oyente de eventos tiende a disparar con más frecuencia.
Los diferentes navegadores no siempre están de acuerdo sobre si se debe activar un evento de cambio para ciertos tipos de interacción

— Gabe
fuente

No creo que se garantice que el evento de entrada se active sincrónicamente.

— Tim Down

Además, las versiones actuales de todos los navegadores admiten el inputevento.

— Tim Down

@TimDown, por eso dije que el soporte del navegador varía. No todo el mundo tiene la versión actual de todos los navegadores.

— Gabe

@TimDown ¿Se dispara sincrónicamente?

— Suraj Jain

@SurajJain: No estoy seguro, para ser honesto.

— Tim Down

La documentación de MDN tiene una explicación clara (no estoy seguro de cuándo se agregó):

El evento de cambio es despedido por input, selecty textarealos elementos cuando una alteración en el valor del elemento es cometido por el usuario. A diferencia del evento de entrada, el evento de cambio no se activa necesariamente para cada alteración del valor de un elemento .

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event

— Joel H
fuente