Javascript murni mendengarkan perubahan nilai masukan

100

Adakah cara agar saya dapat membuat fungsi konstan yang mendengarkan input, jadi ketika nilai input itu berubah, sesuatu akan segera dipicu?

Saya mencari sesuatu menggunakan javascript murni, tanpa plugin, tanpa kerangka kerja dan saya tidak dapat mengedit HTML.

Sesuatu, misalnya:

Ketika saya mengubah nilai input MyObject, fungsi ini berjalan.

Ada bantuan?

gespinha
sumber

Jawaban:

135

Untuk inilah acara itu.

HTMLInputElementObject.addEventListener('input', function (evt) {
    something(this.value);
});
Quentin
sumber
21
Tidak akan berfungsi jika nilai input diubah oleh javascript
ImShogun
1
Perhatikan bahwa typeof this.valueadalah string. Jika diperlukan angka, konversikan dengan parseInt atau parseFloat .
Akseli Palén
34

Sebagai contoh dasar ...

HTML:

<input type="text" name="Thing" value="" />

Naskah:

/* event listener */
document.getElementsByName("Thing")[0].addEventListener('change', doThing);

/* function */
function doThing(){
   alert('Horray! Someone wrote "' + this.value + '"!');
}

Ini biola: http://jsfiddle.net/Niffler/514gg4tk/

Niffler
sumber
11
Tidak akan berfungsi jika konten masukan diubah oleh javascript. baik dengan acara 'input' maupun 'change'.
ImShogun
9
Peristiwa apa yang dapat Anda dengarkan saat nilainya diubah oleh javascript?
zero_cool
3
Dan seperti yang ditunjukkan orang lain, tidak memicu sampai Anda keluar dari kolom input juga. Jawaban lama sekarang, saya tahu. Tetapi jawaban-jawaban ini sangat sering muncul dan tidak pernah menyebutkan batasannya.
Dibatalkan
@ImShogun ada ide tentang cara "mendukung" kasus ketika input diubah melalui JS?
Alessio
9

Sebenarnya jawaban yang dicentang benar, tetapi jawabannya bisa ES6berbentuk:

HTMLInputElementObject.oninput = () => {
  console.log('run'); // Do something
}

Atau bisa ditulis seperti di bawah ini:

HTMLInputElementObject.addEventListener('input', (evt) => {
  console.log('run'); // Do something
});
AmerllicA
sumber
2

Penggunaan default

el.addEventListener('input', function () {
    fn();
});

Tetapi , jika Anda ingin mengaktifkan peristiwa ketika Anda mengubah nilai input secara manual melalui JS, Anda harus menggunakan peristiwa khusus (nama apa pun, seperti 'myEvent' \ 'ev' dll.) JIKA Anda perlu mendengarkan peristiwa 'perubahan' atau 'masukan' formulir dan Anda mengubah nilai input melalui JS - Anda dapat menamai acara khusus Anda 'change' \ 'input' dan itu akan berfungsi juga.

var event = new Event('input');
el.addEventListener('input', function () { 
  fn();
});
form.addEventListener('input', function () { 
  anotherFn();
});


el.value = 'something';
el.dispatchEvent(input);

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

Azune-NK
sumber
-7

alih-alih id gunakan judul untuk mengidentifikasi elemen Anda dan tulis kode seperti di bawah ini.

$(document).ready(()=>{

 $("input[title='MyObject']").change(()=>{
        console.log("Field has been changed...")
    })  
});
kai
sumber
op meminta cara "javascript murni", yang berarti tidak ada jQuery - maka suara
negatifnya