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?

javascript jquery events dom 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
1
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
1
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
7
Todavía no tengo claro la diferencia entre los dos. Suenan muy similares a sus descripciones.
Justin Morgan
10
@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
1
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
1
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
24

  • 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
2
@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
1

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