Détecter les modifications programmatiques sur le texte du type d'entrée

Question

Existe-t-il un moyen d'être informé lorsqu'un script modifie la valeur d'un texte de type d'entrée.

J'ai

<input id='test' type='text' /> 

et un script

document.getElementById('test').value = 'bbb'; 

Je veux être informé de la modification du texte.

Je sais que je pourrais être averti par le clavier, le clavier, le module etc ... (ce qui fonctionne si je tente de suivre la saisie de l'utilisateur) mais qu'en est-il si la modification est effectuée par programmation?

Un grand merci

p.s. Non JQuery s'il vous plaît ou si jquery le fait quelqu'un peut-il expliquer comment il l'accomplit.

Answer 1

Si vous avez affaire à un navigateur moderne, vous pouvez essayer quelque chose comme ceci:

var input = document.getElementById('test'); 
input._value = input.value; 
Object.defineProperty(input, "value", { 
    get: function() {return this._value;}, 
    set: function(v) { 
     // Do your stuff 
     this._value = v; 
    } 
}); 

Cette solution est bien si vous ne vous attendez pas réellement de entrée de l'utilisateur (c'est-à-dire, les champs de saisie de type caché), parce que c'est extrêmement destructeur de la fonctionnalité de base DOM. Garde cela à l'esprit.

Answer 2

La seule façon de suivre instantanément si un changement a été fait serait la suivante:

var value = document.getElementById('test').value; 

function trackChanges(oldVal) { 
    var newVal = document.getElementById('test').value; 

    if (newVal !== oldVal) { 
     alert('Changes occured!'); 
    } 

    var fn = function() { trackChanges(newVal); }; 

    setTimeout(fn(),100); 
} 

setTimeout(trackChanges(value), 100); 

cela signifie que vous appelez une fonction qui est appelée à chaque 100 milisecond par lui-même pour vérifier si un changement a été fait. Peut-être que vous cherchez quelque chose de mieux lorsque vous essayez de tester uniquement si quelque chose d'autre se produit, par exemple:

un clic sur un élément peut-être ...

Answer 3

je trouve la façon la plus simple est de déclencher manuellement en fait l'événement:

document.getElementById('test').value = 'bbb'; 
var evt = new CustomEvent('change'); 
document.getElementById('test').dispatchEvent(evt); 

Juste écouter l'événement change est sujette à erreur lorsque la valeur est modifiée par le programme. Mais puisque vous changez la valeur, ajoutez deux lignes et lancez l'événement change, avec un CustomEvent.

alors vous serez en mesure de prendre cet événement change, que ce soit en ligne:

<input id="test" onchange="console.log(this)"> 

ou avec un auditeur:

document.getElementById('test').addEventListener('change',function(event) { 
    console.log(event.target); 
}); 

cela a l'avantage que si vous avez une entrée qui peut être modifié par l'utilisateur, vous pouvez capturer ces deux événements (de l'utilisateur ou le script)

cela dépend cependant du fait que vous êtes vous-même par programme changer la valeur de l'entrée. Si vous utilisez des bibliothèques (telles que datepickr) qui modifient les valeurs de vos entrées, vous devrez peut-être entrer le code et ajouter ces deux lignes au bon endroit.