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

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