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
1
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
1
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>

Ionică Bizău
sumber
7
Saya masih belum jelas tentang perbedaan antara keduanya. Kedengarannya sangat mirip dari deskripsi Anda.
Justin Morgan
10
@JustinMorgan Seperti dalam contoh JSFiddle, onchangeterjadi "ketika elemen kehilangan fokus" sementara oninputterjadi pada setiap perubahan teks.
Ionică Bizău
1
Perbedaannya adalah bahwa peristiwa oninput terjadi segera setelah nilai elemen berubah, sedangkan onchange terjadi saat elemen kehilangan fokus, setelah konten diubah.
NinoLopezWeb
1
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
24
  • 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
2
@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
1

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