¿Qué eventos dispara un <input type = “number” /> cuando se cambia su valor?

94

Me pregunto si alguien sabe qué eventos desencadena un <input type="number" />elemento HTML5 cuando se hace clic en sus flechas arriba / abajo:

ejemplo de entrada de número

Ya estoy usando un onblurpara cuando el foco abandona el campo de entrada.

javascript html Ian Oxley
fuente
Esto parece ser un error de chrome stackoverflow.com/questions/44978087/…
Oriol Jiménez

Respuestas:

73

change sería el evento que se dispara cuando cambia el valor del campo.

Creo que el evento HTML5 inputtambién se activará.

Jacob Relkin
fuente
36
solo oninputse activa cuando se hace clic en las flechas "arriba" y "abajo".
N 1.1
2
pero onchange solo se dispara con desenfoque, al menos en Firefox. Supongo que tendremos que buscar la pulsación de teclas.
andho
onchange y oninput funcionaron en Opera, pero solo oninput funcionaría en Chrome (y solo entonces cuando devolví falso desde el controlador de eventos; de lo contrario, Chrome dispararía repetidamente el evento oninput)
Ian Oxley
2
changeno se activa cuando se escribe el valor, solo cuando se hace clic en los botones (al menos en Firefox).
Timmmm
5
inputes como una fusión entrekeyup change
Thanh Trung
37

Descubrí que para jQuery, el siguiente código cubría la entrada del teclado, los cambios de la rueda del mouse y los clics de botones en Chrome, y también manejaba la entrada del teclado en Firefox

$("input[type=number]").bind('keyup input', function(){
    // handle event
});
Will Moore
fuente
2
Agregue 'cambio' a eso también y es perfecto. También querrá escuchar los cambios externos, y de todos modos no hay ningún daño en agregarlo.
Matt Fletcher
Y también 'mousewheel' si desea seleccionar eventos de desplazamiento dentro del campo de entrada.
Matt Fletcher
4
Tenga en cuenta que .bind()ahora está en desuso a favor de.on()
Michael Hays
7

encontre eso onkeyup y onchangecubrí todo en Chrome 19. Esto maneja la entrada de valor directa, presionar la tecla de flecha hacia arriba y abajo, hacer clic en los botones y desplazar la rueda del mouse.

onchangesolo sería suficiente en Chrome, pero otros navegadores que solo muestran el campo como un cuadro de texto necesitan el onkeyupenlace, que funciona perfectamente para leer el nuevo valor.

Vincular el mousewheelevento por separado tuvo menos éxito. El evento se disparó demasiado pronto, antes de que se actualizara el valor del campo, y por lo tanto, siempre dio el valor anterior del campo.

Niall King
fuente
Esto también es cierto para Firefox.
barfuin
5

El onchangeevento se activa con el desenfoque, pero el oninputevento se activa a medida que escribe. ¿Quizás quieras poner un temporizador en el oninputevento y disparar tu onchangeevento cuando el usuario ha dejado de escribir por un segundo?

andho
fuente