Jakie zdarzenia wywołuje <input type = „number” /> po zmianie jego wartości?

95

Zastanawiam się tylko, czy ktoś wie, jakie zdarzenia wywołuje <input type="number" />element HTML5 po kliknięciu jego strzałek w górę / w dół:

przykładowe wprowadzenie numeru

Używam już znaku onblurfor, gdy fokus opuszcza pole wejściowe.

javascript html Ian Oxley
źródło
Wygląda na to, że jest to błąd w chrome stackoverflow.com/questions/44978087/…
Oriol Jiménez

Odpowiedzi:

74

change byłoby zdarzeniem uruchamianym w przypadku zmiany wartości pola.

Myślę, że zdarzenie HTML5 inputrównież by się uruchomiło.

Jacob Relkin
źródło
37
oninputjest uruchamiany tylko po kliknięciu strzałek „w górę” i „w dół”.
N 1.1
2
ale zmiana powoduje tylko rozmycie, przynajmniej w przeglądarce Firefox. Myślę, że będziemy musieli poszukać naciśnięcia klawisza.
andho
onchange i oninput działały w Operze, ale tylko oninput działałoby w Chrome (i tylko wtedy, gdy zwróciłem false z modułu obsługi zdarzeń - w przeciwnym razie Chrome wielokrotnie uruchomiłby zdarzenie oninput)
Ian Oxley
2
changenie uruchamia się po wpisaniu wartości, tylko po kliknięciu przycisków (przynajmniej w przeglądarce Firefox).
Timmmm
5
inputjest jak połączeniekeyup change
Thanh Trung
37

Zauważyłem, że w przypadku jQuery następujący kod obejmował wprowadzanie z klawiatury, zmiany kółka myszy i kliknięcia przycisków w przeglądarce Chrome, a także obsługiwał wprowadzanie z klawiatury w przeglądarce Firefox

$("input[type=number]").bind('keyup input', function(){
    // handle event
});
Will Moore
źródło
2
Dodaj do tego „zmianę” i jest idealnie. Nadal będziesz chciał nasłuchiwać zewnętrznych zmian, a i tak nie ma nic złego w dodaniu.
Matt Fletcher,
A także „kółko myszy”, jeśli chcesz wychwycić zdarzenia przewijania w polu wprowadzania.
Matt Fletcher,
4
Zauważ, że .bind()jest to teraz przestarzałe na korzyść.on()
Michael Hays
7

Znalazłem to onkeyupi onchangeomówiłem wszystko w Chrome 19. Obsługuje to bezpośrednie wprowadzanie wartości, naciśnięcie klawisza strzałki w górę w dół, klikanie przycisków i przewijanie kółka myszy.

onchangeSamo byłoby wystarczające w Chrome, ale inne przeglądarki, które renderują pole tylko jako pole tekstowe, potrzebują onkeyuppowiązania, które działa doskonale, aby odczytać nową wartość.

Wiązanie mousewheelwydarzenia osobno było mniej skuteczne. Zdarzenie zostało uruchomione zbyt wcześnie - przed zaktualizowaniem wartości pola - i dlatego zawsze podawało poprzednią wartość pola

Niall King
źródło
Dotyczy to również przeglądarki Firefox.
barfuin
5

W onchangeZdarzenie na rozmycie ale oninputZdarzenie podczas pisania. Może chcesz ustawić licznik czasu w oninputzdarzeniu i uruchomić je onchange, gdy użytkownik przestał pisać na sekundę?

andho
źródło