Quais eventos um <input type = “number” /> dispara quando seu valor é alterado?

93

Basta saber se alguém sabe quais eventos um <input type="number" />elemento HTML5 dispara quando suas setas para cima / para baixo são clicadas:

exemplo de entrada de número

Já estou usando um onblurpara quando o foco sai do campo de entrada.

javascript html Ian Oxley
fonte
Este parece ser um bug de chrome stackoverflow.com/questions/44978087/…
Oriol Jiménez

Respostas:

73

change seria o evento disparado quando o valor do campo muda.

Acho que o evento HTML5 inputtambém dispararia.

Jacob Relkin
fonte
36
só oninputé disparado quando as setas 'para cima' e 'para baixo' são clicadas.
N 1,1
2
mas onchange só dispara em desfoque, pelo menos no firefox. Acho que teremos que procurar pelo pressionamento de uma tecla.
andho
onchange e oninput funcionavam no Opera, mas apenas oninput funcionaria no Chrome (e somente então quando eu retornasse false do manipulador de eventos - caso contrário, o Chrome dispararia repetidamente o evento oninput)
Ian Oxley
2
changenão dispara quando o valor é digitado, apenas quando os botões são clicados (pelo menos no Firefox).
Timmmm 01 de
5
inputé como uma fusão entrekeyup change
Thanh Trung
37

Descobri que para jQuery o código a seguir cobria a entrada do teclado, as mudanças da roda do mouse e cliques de botão no Chrome, e também lidava com a entrada do teclado no Firefox

$("input[type=number]").bind('keyup input', function(){
    // handle event
});
Will Moore
fonte
2
Adicione 'mudança' a isso também e é perfeito. Você ainda vai querer ouvir as mudanças externas nele também, e não há mal nenhum em adicioná-lo de qualquer maneira.
Matt Fletcher
E também 'rolar o mouse' se quiser selecionar eventos de rolagem dentro do campo de entrada.
Matt Fletcher
4
Observe que .bind()agora está obsoleto em favor de.on()
Michael Hays
7

Eu descobri isso onkeyupe onchangecobri tudo no Chrome 19. Isso lida com a entrada direta de valor, pressionamento de tecla de seta para cima e para baixo, clicando nos botões e rolando a roda do mouse.

onchangepor si só seria suficiente no Chrome, mas outros navegadores que apenas renderizam o campo como uma caixa de texto precisam da onkeyupligação, que funciona perfeitamente para ler o novo valor.

Vincular o mousewheelevento separadamente teve menos sucesso. O evento foi disparado muito cedo - antes que o valor do campo fosse atualizado - e, portanto, sempre forneceu o valor anterior do campo

Niall King
fonte
Isso também é válido para o Firefox.
barfuin de
5

O onchangeevento dispara em desfoque, mas oninputdispara conforme você digita. Talvez você queira colocar um cronômetro no oninputevento e dispará-lo onchangequando o usuário parar de digitar por um segundo.

andho
fonte
3

Há um bug atual no Edge que impede a mudança ou entrada de disparar ao usar as teclas de seta em uma entrada de número.

Lucent
fonte