Peristiwa apa yang diaktifkan oleh <input type = "number" /> ketika nilainya diubah?

95

Hanya ingin tahu apakah ada yang tahu peristiwa apa yang <input type="number" />diaktifkan elemen HTML5 saat panah atas / bawahnya diklik:

contoh masukan nomor

Saya sudah menggunakan onbluruntuk saat fokus meninggalkan bidang masukan.

javascript html Ian Oxley
sumber
Ini sepertinya bug dari chrome stackoverflow.com/questions/44978087/…
Oriol Jiménez

Jawaban:

75

change akan menjadi peristiwa yang diaktifkan saat nilai bidang berubah.

Saya pikir acara HTML5 inputjuga akan aktif.

Jacob Relkin
sumber
37
hanya oninputditembakkan ketika panah 'atas' dan 'bawah' diklik.
N 1.1
2
tapi onchange hanya menyala pada blur, setidaknya di firefox. Saya kira kita harus mencari penekanan tombol.
andho
onchange dan oninput keduanya bekerja di Opera, tetapi hanya oninput yang akan berfungsi di Chrome (dan hanya kemudian ketika saya mengembalikan false dari event-handler - jika tidak, Chrome akan berulang kali mengaktifkan peristiwa oninput)
Ian Oxley
2
changetidak menyala saat nilai diketik, hanya jika tombol diklik (setidaknya di Firefox).
Timmmm
5
inputseperti perpaduan antarakeyup change
Thanh Trung
37

Saya menemukan bahwa untuk jQuery kode berikut mencakup input keyboard, perubahan roda mouse dan klik tombol di Chrome, dan juga menangani input keyboard di Firefox

$("input[type=number]").bind('keyup input', function(){
    // handle event
});
Will Moore
sumber
2
Tambahkan 'perubahan' juga dan itu sempurna. Anda tetap ingin mendengarkan perubahan eksternal juga, dan tidak ada salahnya menambahkannya.
Matt Fletcher
Dan juga 'roda mouse' jika Anda ingin melanjutkan acara gulir di dalam kolom input.
Matt Fletcher
4
Perhatikan bahwa .bind()sekarang sudah usang demi.on()
Michael Hays
7

Saya menemukan itu onkeyupdan onchangemenutupi semuanya di Chrome 19. Ini menangani input nilai langsung, menekan tombol panah ke bawah, mengklik tombol dan menggulir roda mouse.

onchangesaja sudah cukup di Chrome, tetapi browser lain yang hanya merender bidang sebagai kotak teks memerlukan onkeyuppengikatan, yang berfungsi dengan sempurna untuk membaca nilai baru.

Mengikat mousewheelacara secara terpisah kurang berhasil. Peristiwa diaktifkan terlalu awal - sebelum nilai bidang diperbarui - dan oleh karena itu selalu memberikan nilai bidang sebelumnya

Niall King
sumber
Ini juga berlaku untuk Firefox.
barfuin
5

The onchangeperistiwa kebakaran di blur tetapi oninputperistiwa kebakaran saat Anda mengetik. Mungkin Anda ingin memasang pengatur waktu pada oninputacara dan mengaktifkan onchangeacara Anda ketika pengguna berhenti mengetik sedetik?

andho
sumber