L’entrée jquery récupère l’ancienne valeur avant onchange et obtient la valeur après modification

J’ai un input text dans jQuery je veux savoir s’il est possible d’obtenir la valeur de ce input text ( type=number et type=text ) avant que le onchange se produise et aussi obtenir la valeur du même texte d’entrée après que le changement se produise . Ceci utilise jquery.

Ce que j’ai essayé:

J’ai essayé d’enregistrer la valeur sur la variable puis appeler cette valeur dans onchange mais je reçois une valeur vide

Le moyen le plus simple consiste à enregistrer la valeur d’origine à l’aide de data() lorsque l’élément est activé. Voici un exemple très basique:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/e4ovx435/

 $('input').on('focusin', function(){ console.log("Saving value " + $(this).val()); $(this).data('val', $(this).val()); }); $('input').on('change', function(){ var prev = $(this).data('val'); var current = $(this).val(); console.log("Prev value " + prev); console.log("New value " + current); });

Mieux vaut utiliser des gestionnaires d’événements delegates

Remarque: il est généralement plus efficace d’utiliser un gestionnaire d’événements délégué lorsqu’il peut y avoir plusieurs éléments correspondants. De cette façon, un seul gestionnaire est ajouté (temps système réduit et initialisation plus rapide) et toute différence de vitesse au moment de l’événement est négligeable.

Voici le même exemple utilisant des événements delegates connectés au document :

 $(document).on('focusin', 'input', function(){ console.log("Saving value " + $(this).val()); $(this).data('val', $(this).val()); }).on('change','input', function(){ var prev = $(this).data('val'); var current = $(this).val(); console.log("Prev value " + prev); console.log("New value " + current); });

JsFiddle: http://jsfiddle.net/TrueBlueAussie/e4ovx435/65/

Les événements delegates fonctionnent en écoutant un événement ( focusin , change etc.) sur un élément ancêtre ( document * dans ce cas), puis en appliquant le filtre jQuery ( input ) aux seuls éléments de la chaîne de bulles, puis en appliquant la fonction à ceux qui correspondent. éléments qui ont causé l’événement .

* Remarque: En règle générale, utilisez le document comme valeur par défaut pour les événements delegates et non pour le body . body a un bogue, lié au style, qui peut l’empêcher de recevoir des événements de souris bouillonnés. De plus, le document existe toujours afin que vous puissiez le joindre en dehors d’un gestionnaire prêt pour le DOM 🙂

Vous aurez certainement besoin de stocker l’ancienne valeur manuellement, en fonction du moment qui vous intéresse (avant la mise au point, à partir du dernier changement). La valeur initiale peut être extraite de la propriété defaultValue:

 function onChange() { var oldValue = this.defaultValue; var newValue = this.value; }

La valeur avant la mise au point peut être prise comme indiqué dans la réponse de Gone Coding. Mais vous devez garder à l’esprit que la valeur peut être modifiée sans se focaliser.