Какие события возникают у <input type = «number» /> при изменении его значения?

95

Просто интересно, знает ли кто-нибудь, какие события <input type="number" />срабатывает элемент HTML5 при нажатии на его стрелки вверх / вниз:

пример ввода числа

Я уже использую, onblurкогда фокус покидает поле ввода.

javascript html

— Ян Оксли
источник

Кажется, это ошибка хрома stackoverflow.com/questions/44978087/…

— Ориоль Хименес

75

change будет событием, которое запускается при изменении значения поля.

Я думаю, что событие HTML5 inputтоже сработает.

— Яков Релкин
источник

37

oninputсрабатывает только при нажатии стрелок «вверх» и «вниз».

— N 1.1

2

но onchange срабатывает только при размытии, по крайней мере, в firefox. Думаю, нам придется искать нажатие клавиш.

— andho

onchange и oninput работали в Opera, но только oninput будет работать в Chrome (и только тогда, когда я верну false из обработчика событий - в противном случае Chrome будет многократно запускать событие oninput)

— Ян Оксли

2

changeне срабатывает при вводе значения, только при нажатии кнопок (по крайней мере, в Firefox).

— Timmmm 01

5

inputкак слияниеkeyup change

— Thanh Trung

37

Я обнаружил, что для jQuery следующий код охватывает ввод с клавиатуры, изменения колесика мыши и щелчки кнопок в Chrome, а также обрабатывает ввод с клавиатуры в Firefox.

$("input[type=number]").bind('keyup input', function(){
    // handle event
});

— Уилл Мур
источник

2

Добавьте к этому «изменение», и это прекрасно. Вы все равно захотите прислушаться к внешним изменениям, и в любом случае нет ничего плохого в том, чтобы добавить его.

— Мэтт Флетчер

А также колесо мыши, если вы хотите отслеживать события прокрутки внутри поля ввода.

— Мэтт Флетчер

4

Обратите внимание, что .bind()теперь устарело в пользу.on()

— Michael Hays

7

Я нашел это onkeyupиonchange рассмотрел все в Chrome 19. Он обрабатывает прямой ввод значений, нажатие клавиши со стрелкой вверх, нажатие кнопок и прокрутку колеса мыши.

onchange одного будет достаточно в Chrome, но другие браузеры, которые отображают поле только как текстовое поле, нуждаются в onkeyup привязке, которая отлично работает для чтения нового значения.

Привязка mousewheelсобытия отдельно была менее успешной. Событие сработало слишком рано - до обновления значения поля - и поэтому всегда давало предыдущее значение поля.

— Найл Кинг
источник

Это также верно и для Firefox.

— barfuin

5

В onchangeсобытие срабатывает на размытость , но как oninputсобытие срабатывает при вводе. Может быть, вы захотите установить таймер на oninputсобытие и запустить onchangeсобытие, когда пользователь перестал печатать на секунду?

— Андхо
источник

3

В Edge есть текущая ошибка, препятствующая срабатыванию изменения или ввода при использовании клавиш со стрелками при вводе чисел.

— Lucent
источник