Perbedaan antara peristiwa "perubahan" dan "masukan" untuk elemen `masukan`

109

Bisakah seseorang memberi tahu saya apa perbedaan antara the changedan inputevents?

Saya menggunakan jQuery untuk menambahkannya:

$('input[type="text"]').on('change', function() {
    alert($(this).val());
})

Ini juga berfungsi dengan inputalih - alih change.

Mungkin beberapa perbedaan dalam urutan acara relatif terhadap fokus?

— Gabriel Petrovay
sumber

rakshasingh.weebly.com/1/post/2012/12/… Perhatikan bahwa oninput tidak didukung di browser lama. Anda dapat menggunakan then: onchange, onpaste, dan onkeyup sebagai solusi. PS: acara oninput juga bermasalah di IE9 dan tidak diaktifkan saat penghapusan.

— A. Wolff

masukan lebih sering menyala, seperti setelah tombol ditekan, sedangkan perubahan pada dasarnya menyala saat masukan kabur dan nilainya tidak seperti saat masukan difokuskan.

— dandavis

The inputevent juga menangkap paste. Lihat stackoverflow.com/questions/15727324/…

— Antony

TLDR: masukan api saat Anda mengetik, ubah api saat Anda mengklik di luar

— Muhammad Umer

Jawaban:

117

Menurut posting ini :

oninput peristiwa terjadi ketika konten teks suatu elemen diubah melalui antarmuka pengguna.
onchangeterjadi saat pemilihan, status yang dicentang, atau konten elemen telah berubah . Dalam beberapa kasus, ini hanya terjadi saat elemen kehilangan fokus atau saat menekan return(Enter) dan nilainya telah diubah. Atribut onchange dapat digunakan dengan: <input>, <select>, dan <textarea>.

TL; DR:

oninput: perubahan apa pun yang dilakukan pada konten teks
onchange:
- Jika itu adalah <input />: ubah + kehilangan fokus
- Jika itu adalah <select>: opsi ubah

$("input, select").on("input", function () {
    $("pre").prepend("\nOn input. | " + this.tagName + " | " + this.value);
}).on("change", function () {
    $("pre").prepend("\nOn change | " + this.tagName + " | " + this.value);
}).on("focus", function () {
    $("pre").prepend("\nOn focus | " + this.tagName + " | " + this.value);
}).on("blur", function () {
    $("pre").prepend("\nOn blur | " + this.tagName + " | " + this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
<select>
  <option>Alice</option>
  <option>Bob</option>
  <option>Carol</option>
  <option>Dave</option>
  <option>Emma</option>
</select>
<pre></pre>

Luaskan cuplikan

— Ionică Bizău
sumber

Saya masih belum jelas tentang perbedaan antara keduanya. Kedengarannya sangat mirip dari deskripsi Anda.

— Justin Morgan

@JustinMorgan Seperti dalam contoh JSFiddle, onchangeterjadi "ketika elemen kehilangan fokus" sementara oninputterjadi pada setiap perubahan teks.

— Ionică Bizău

Perbedaannya adalah bahwa peristiwa oninput terjadi segera setelah nilai elemen berubah, sedangkan onchange terjadi saat elemen kehilangan fokus, setelah konten diubah.

— NinoLopezWeb

Dengan kata lain "input" dipicu segera ketika karakter apa pun diubah, dihapus atau ditambahkan sementara "perubahan" dievaluasi setelah kontrol kehilangan fokus dan terjadi hanya jika nilai telah berubah

— Adam Moszczyński

Saya baru saja mencoba dengan Chrome. onchangejuga dipicu saat Anda menekan enter sambil tetap fokus.

— Rick

The change eventkebakaran di kebanyakan browser bila konten berubah dan elemen kehilangan focus. Ini pada dasarnya adalah kumpulan perubahan. Itu tidak akan menyala untuk setiap perubahan seperti dalam kasus ini input event.
The input eventkebakaran serentak pada perubahan konten untuk elemen. Dengan demikian, pendengar acara cenderung lebih sering aktif.
Browser yang berbeda tidak selalu setuju apakah peristiwa perubahan harus diaktifkan untuk jenis interaksi tertentu

— Gabe
sumber

Menurut saya, peristiwa masukan tidak dijamin akan diaktifkan secara sinkron.

— Tim Down

Selain itu, versi terkini dari semua browser mendukung inputacara tersebut.

— Tim Down

@TimDown, itulah mengapa saya mengatakan dukungan browser bervariasi. Tidak semua orang memiliki versi terkini dari setiap browser.

— Gabe

@TimDown Apakah itu menyala secara serempak?

— Suraj Jain

@SurajJain: Saya tidak yakin, jujur saja.

— Tim Down

Dokumentasi MDN memiliki penjelasan yang jelas (tidak yakin kapan ditambahkan):

Peristiwa perubahan dipicu untuk input,, selectdan textareaelemen saat perubahan pada nilai elemen dilakukan oleh pengguna. Berbeda dengan peristiwa masukan, peristiwa perubahan tidak selalu diaktifkan untuk setiap perubahan pada nilai elemen .

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event

— Joel H.
sumber