Які події спрацьовує <input type = “number” /> при зміні його значення?

94

Просто цікаво, чи хтось знає, які події <input type="number" />запускає елемент HTML5 при натисканні його стрілок вгору / вниз:

приклад введення числа

Я вже використовую onblurfor, коли фокус залишає поле введення.

javascript html

— Ян Окслі
джерело

Здається, це помилка chrome stackoverflow.com/questions/44978087/…

— Oriol Jiménez

73

change буде подією, яка запускається, коли значення поля змінюється.

Я думаю, що подія HTML5 inputтакож спрацює.

— Яків Рєлкін
джерело

36

oninputзапускається лише при натисканні стрілок вгору та вниз.

— N 1.1

2

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

— andho

onchange і oninput працювали в Opera, але тільки oninput працював у Chrome (і лише тоді, коли я повертав false з обробника подій - інакше Chrome неодноразово запускав подію oninput)

— Ian Oxley

2

changeне спрацьовує, коли вводиться значення, лише за натискання кнопок (принаймні у Firefox).

— Timmmm

5

inputце як злиття міжkeyup change

— Thanh Trung

37

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

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

— Уілл Мур
джерело

2

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

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

А також "коліщатко миші", якщо ви хочете взяти на себе події прокрутки всередині поля введення.

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

4

Зауважимо, що .bind()зараз припинено на користь.on()

— Майкл Хейс,

7

Я знайшов це onkeyupі onchangeохопив усе в Chrome 19. Це обробляє пряме введення значення, натискання клавіші зі стрілкою вниз, клацання кнопок і прокручування коліщатка миші.

onchangeпоодинці було б достатньо в Chrome, але іншим браузерам, які роблять поле лише текстовим полем, потрібна onkeyupприв'язка, яка чудово працює для читання нового значення.

Пов’язання mousewheelподії окремо було менш вдалим. Подія запускалася занадто рано - до оновлення значення поля - і тому завжди давала попереднє значення поля

— Найл Кінг
джерело

Це також стосується Firefox.

— барфуїн

5

У onchangeподія спрацьовує на розмитість алеoninput подія спрацьовує при введенні. Можливо, вам може знадобитися встановити таймер на oninputподію та активувати вашу onchangeподію, коли користувач перестане друкувати на секунду?

— andho
джерело

3

У Edge є поточна помилка, яка перешкоджає спрацьовуванню змін або вводу при використанні клавіш зі стрілками в цифровому введенні.

— Lucent
джерело