Bir <input type = "number" />, değeri değiştirildiğinde hangi olayları tetikler?

95

Bir HTML5 <input type="number" />öğesinin yukarı / aşağı okları tıklandığında hangi olayları tetiklediğini bilen var mı merak ediyorum :

örnek numara girişi

onblurOdak giriş alanından çıktığında zaten bir for kullanıyorum .

javascript html

— Ian Oxley
kaynak

Bu, bir chrome stackoverflow.com/questions/44978087/…

— Oriol Jiménez

76

change alanın değeri değiştiğinde tetiklenen olay olacaktır.

HTML5 etkinliğinin inputde tetikleneceğini düşünüyorum .

— Jacob Relkin
kaynak

37

sadece oninput'yukarı' ve 'aşağı' oklara tıklandığında ateşlenir.

— K 1.1

2

ancak onchange yalnızca bulanıklıkta, en azından firefox'ta ateşler. Sanırım tuşa basmayı aramamız gerekecek.

— andho

onchange ve oninput her ikisi de Opera'da çalıştı, ancak yalnızca oninput Chrome'da çalışacaktı (ve yalnızca o zaman olay işleyiciden false döndürdüğümde - aksi takdirde Chrome oninput olayını tekrar tekrar başlatacaktı)

— Ian Oxley

2

changedeğer girildiğinde ateşlenmez, yalnızca düğmeler tıklandığında (en azından Firefox'ta).

— Timmmm

5

inputarasında bir füzyon gibikeyup change

— Thanh Trung

37

JQuery için aşağıdaki kodun klavye girişi, fare tekerleği değişiklikleri ve Chrome'daki düğme tıklamaları kapsadığını ve ayrıca Firefox'ta klavye girişini işlediğini buldum

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

— Will Moore
kaynak

2

Buna da 'değişim' ekleyin ve mükemmel. Yine de harici değişiklikleri dinlemek isteyeceksiniz ve yine de eklemenin bir zararı yok.

— Matt Fletcher

Ayrıca, giriş alanındaki kaydırma olaylarını görmek istiyorsanız 'fare tekerleği'.

— Matt Fletcher

4

Not .bind()şimdi lehine kullanımdan kaldırıldı.on()

— Michael Hays

7

Bunu buldum onkeyupve onchangeChrome 19'daki her şeyi ele aldım. Bu, doğrudan değer girişi, yukarı aşağı ok tuşlarına basma, düğmeleri tıklama ve fare tekerleğini kaydırmayı işler.

onchangeChrome'da tek başına yeterli olacaktır, ancak alanı yalnızca bir metin kutusu olarak işleyen diğer tarayıcılar onkeyup, yeni değeri okumak için mükemmel çalışan bağlamaya ihtiyaç duyar .

Bağlama mousewheelolayı ayrı az başarılı olmuştur. Etkinlik çok erken tetiklendi - alan değeri güncellenmeden önce - ve bu nedenle her zaman alanın önceki değerini verdi

— Niall King
kaynak

Bu, Firefox için de geçerlidir.

— barfuin

5

onchangeBulanıklık üzerinde olayı harekete ancak oninputolay yangınlar Yazarken. Belki de oninputetkinliğe bir zamanlayıcı koymak onchangeve kullanıcı bir saniyeliğine yazmayı bıraktığında etkinliğinizi tetiklemek isteyebilirsiniz ?

— andho
kaynak

3

Bir sayı girişinde ok tuşlarını kullanırken Edge'de değişikliğin veya girişin ateşlenmesini engelleyen güncel bir hata var .

— Lucent
kaynak