Déclencher l'événement Change lorsque la valeur de l'entrée est modifiée de manière programmatique ?

Question

J'ai une entrée dans mon formulaire.

<input type="text" id="changeProgramatic" onchange="return ChangeValue(this);"/>

Si je modifie la valeur de cette textBox (changeProgramatic) à l'aide d'une autre fonction JavaScript, cela ne déclenchera pas l'événement change (Note : je passe 'this' dans la méthode).

Answer 1

Solution JS vanille :

var el = document.getElementById('changeProgramatic');
el.value='New Value'
el.dispatchEvent(new Event('change'));

Il convient de noter que dispatchEvent ne fonctionne pas dans l'ancien IE (voir : caniuse ). Il est donc préférable de ne l'utiliser que sur les sites web internes (et non sur les sites web à large audience). .

À partir de 2019, vous devriez donc vous assurer que vos clients/publics n'utilisent pas Windows XP (oui, certains le font encore en 2019). Vous voudrez peut-être utiliser commentaires conditionnels pour avertir les clients que vous ne prenez pas en charge les anciens IE (avant IE 11 dans ce cas), mais notez que les commentaires conditionnels ne fonctionnent que jusqu'à IE9 (ils ne fonctionnent pas dans IE10). Vous pouvez donc utiliser la détection des fonctionnalités à la place. Par exemple, vous pourriez faire une vérification anticipée pour : typeof document.body.dispatchEvent === 'function' .

Answer 2

Vous utilisez jQuery, n'est-ce pas ? Séparez JavaScript de HTML.

Vous pouvez utiliser déclencher o triggerHandler .

var $myInput = $('#changeProgramatic').on('change', ChangeValue);

var anotherFunction = function() {
  $myInput.val('Another value');
  $myInput.trigger('change');
};

Answer 3

Si quelqu'un utilise react, ce qui suit sera utile :

https://stackoverflow.com/a/62111884/1015678

const valueSetter = Object.getOwnPropertyDescriptor(this.textInputRef, 'value').set;
const prototype = Object.getPrototypeOf(this.textInputRef);
const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype, 'value').set;
if (valueSetter && valueSetter !== prototypeValueSetter) {
    prototypeValueSetter.call(this.textInputRef, 'new value');
} else {
    valueSetter.call(this.textInputRef, 'new value');
}
this.textInputRef.dispatchEvent(new Event('input', { bubbles: true }));