Pure Javascript ascolta la modifica del valore di input

98

C'è un modo per creare una funzione costante che ascolta un input, quindi quando il valore di input cambia, viene attivato immediatamente qualcosa?

Sto cercando qualcosa che utilizzi puro javascript, nessun plugin, nessun framework e non riesco a modificare l'HTML.

Qualcosa, ad esempio:

Quando cambio il valore nell'input MyObject, questa funzione viene eseguita.

Qualsiasi aiuto?

javascript

— gespinha
fonte

133

A questo servono gli eventi .

HTMLInputElementObject.addEventListener('input', function (evt) {
    something(this.value);
});

— Quentin
fonte

21

Non funzionerebbe se il valore di input viene modificato da javascript

— ImShogun

1

Nota che typeof this.valueè string. Se è necessario un numero, convertirlo con parseInt o parseFloat .

— Akseli Palén

34

Come esempio di base ...

HTML:

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

Script:

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

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

Ecco un violino: http://jsfiddle.net/Niffler/514gg4tk/

— Niffler
fonte

11

Non funzionerebbe se il contenuto di input viene modificato da javascript. né con l'evento 'input' né 'change'.

— ImShogun

9

Quale evento puoi ascoltare quando il valore viene modificato da javascript?

— zero_cool

3

E come hanno sottolineato gli altri, non si attiva fino a quando non esci dal campo di input. Vecchia risposta ormai, lo so. Ma queste risposte appaiono sorprendentemente spesso e non menzionano mai i limiti.

— Torxed

8

In realtà, la risposta spuntata è esattamente giusta, ma la risposta può essere in ES6forma:

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

Oppure può essere scritto come di seguito:

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

— AmerllicA
fonte

2

Utilizzo predefinito

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

Tuttavia , se si desidera attivare l'evento quando si modifica manualmente il valore degli input tramite JS, è necessario utilizzare un evento personalizzato (qualsiasi nome, come 'myEvent' \ 'ev' ecc.) SE è necessario ascoltare i moduli 'change' o 'input' event e modifichi il valore degli input tramite JS: puoi denominare il tuo evento personalizzato "modifica" \ "input" e funzionerà anche tu.

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
fonte

-7

invece di id usa il titolo per identificare il tuo elemento e scrivi il codice come sotto.

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

 $("input[title='MyObject']").change(()=>{
        console.log("Field has been changed...")
    })  
});

— kai
fonte

op ha richiesto il modo "javascript puro", che significa niente jQuery - da qui i

— voti negativi