Javascript pur écoute le changement de valeur d'entrée

98

Existe-t-il un moyen de créer une fonction constante qui écoute une entrée, donc lorsque cette valeur d'entrée change, quelque chose est déclenché immédiatement?

Je cherche quelque chose utilisant du javascript pur, pas de plugins, pas de frameworks et je ne peux pas éditer le HTML.

Quelque chose, par exemple:

Lorsque je change la valeur dans l'entrée MyObject, cette fonction s'exécute.

De l'aide?

javascript

— Gespinha
source

133

C'est à cela que servent les événements .

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

— Quentin
source

21

Ne fonctionnerait pas si la valeur d'entrée est modifiée par javascript

— ImShogun

1

Notez que typeof this.valuec'est string. Si un nombre est nécessaire, convertissez-le avec parseInt ou parseFloat .

— Akseli Palén

34

À titre d'exemple de base ...

HTML:

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

Scénario:

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

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

Voici un violon: http://jsfiddle.net/Niffler/514gg4tk/

— Niffler
source

11

Ne fonctionnerait pas si le contenu d'entrée est modifié par javascript. ni avec l'événement 'input' ni 'change'.

— ImShogun

9

Quel événement pouvez-vous écouter lorsque la valeur est modifiée par javascript?

— zero_cool

3

Et comme les autres l'ont souligné, ne se déclenche pas tant que vous n'avez pas quitté le champ de saisie. Ancienne réponse maintenant, je sais. Mais ces réponses apparaissent étonnamment souvent et elles ne mentionnent jamais les limites.

— Torxed

8

En fait, la réponse cochée est exactement la bonne, mais la réponse peut être en ES6forme:

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

Ou peut être écrit comme ci-dessous:

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

— AmerllicA
source

2

Utilisation par défaut

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

Mais , si vous voulez déclencher un événement lorsque vous modifiez manuellement la valeur des entrées via JS, vous devez utiliser un événement personnalisé (n'importe quel nom, comme 'myEvent' \ 'ev' etc.) SI vous devez écouter l'événement 'change' ou 'input' des formulaires et vous changez la valeur des entrées via JS - vous pouvez nommer votre événement personnalisé «changement» \ «entrée» et cela fonctionnera aussi.

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
source

-7

au lieu de id, utilisez title pour identifier votre élément et écrivez le code comme ci-dessous.

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

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

— kai
source

op a demandé une méthode "pur javascript", ce qui signifie pas de jQuery - d'où les

— votes négatifs