Какие события возникают у <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
источник