¿Cuál es la diferencia entre el atributo onBlur y onChange en HTML?

117

¿Cuándo se llama uno frente al otro? ¿Hay alguna situación en la que se llamaría a onChange pero no a onBlur?

pacman
fuente

Respuestas:

171

los onBlur evento se activa cuando se ha alejado de un objeto sin haber cambiado necesariamente su valor.

los onChange evento solo se llama cuando ha cambiado el valor del campo y pierde el foco.

Es posible que desee echar un vistazo a la introducción de quirksmode a los eventos . Este es un gran lugar para obtener información sobre lo que sucede en su navegador cuando interactúa con él. Su libro también es bueno.

Mark Dickinson
fuente
2
su enlace sobre quirksmode no se habla de la falta de definición, eventos sólo los de base
stackdave
23

onblur se activa cuando un campo pierde el foco, mientras que onchange se activa cuando cambia el valor de ese campo. Sin embargo, estos eventos no siempre ocurrirán en el mismo orden.

En Firefox, la tabulación de un campo cambiado se activará al cambiar y luego al desenfoque, y normalmente hará lo mismo en IE. Sin embargo, si presiona la tecla Intro en lugar de la pestaña, en Firefox se activará onblur y luego onchange, mientras que IE normalmente se activará en el orden original. Sin embargo, he visto casos en los que IE también disparará desenfoque primero, así que tenga cuidado. No se puede asumir que el onblur o el onchange sucederán antes que el otro.


fuente
10

Un ejemplo para concretar las cosas. Si tiene una selección así:

<select onchange="" onblur="">
  <option>....
</select>

la onblur()que se llama cuando se desplaza fuera. El onchange()se llama cuando selecciona una opción diferente de la selección, es decir, cambia lo que está seleccionado actualmente.

Brian Agnew
fuente
1
Otro ejemplo: en las entradas de tipo number, al hacer clic en las flechas arriba / abajo se disparará un evento de cambio (pero no un evento de desenfoque), mientras que escribir solo provoca un evento de cambio cuando el campo pierde el foco.
Chris Middleton
7

En Firefox, el cambio se dispara solo cuando tabula o hace clic fuera del campo de entrada. Lo mismo ocurre con Onblur. La diferencia es que onblur se activará independientemente de que haya cambiado algo en el campo o no. Es posible que ENTER active uno o ambos, pero no lo sabría si deshabilita ENTER en sus formularios para evitar envíos inesperados.

Betty Mock
fuente
4

onBlur es cuando su enfoque ya no está en el campo en cuestión.

La propiedad onblur devuelve el código del controlador de eventos onBlur, si lo hay, que existe en el elemento actual.

onChange es cuando cambia el valor del campo.

Ólafur Waage
fuente
4

Creo que es importante tener en cuenta aquí que onBlur () se activa independientemente.

Este es un hilo útil, pero lo único que no aclara es que onBlur () se activará cada vez.

onChange () solo se activará cuando se cambie el valor.

php-b-grader
fuente
3

onChange es cuando algo dentro de un campo cambia, por ejemplo, escribe algo en una entrada de texto.

onBlur es cuando quita el foco de un campo, por ejemplo, estaba escribiendo en una entrada de texto y ha hecho clic en él.

Entonces, realmente son casi lo mismo, pero para que onChange se comporte de la forma en que onBlur hace algo, esa entrada debe cambiar.

Sam152
fuente