web-dev-qa-db-fra.com

Evénement jQuery Change sur un élément <input> - un moyen de conserver la valeur précédente?

J'ai effectué des recherches dans la matinée et je ne trouvais pas de solutions simples ... En gros, je veux capturer un changement dans un élément d'entrée, mais aussi connaître la valeur précédente.

Voici un événement change et un élément d’entrée sous sa forme la plus simple. Clairement, je peux obtenir la nouvelle valeur avec $ (elem) .val (), mais existe-t-il une méthode sournoise qui me manque pour obtenir la valeur précédente? Je ne vois rien dans l'API jQuery pour le faire, mais peut-être que quelqu'un l'a déjà fait et a quelques conseils?

<script>
    $(document).ready(function(){
        $('#myInputElement').bind('change', function(){
            //var oldvalue = ???
            var newvalue = $(this).val();
        });
    });
</script>
<input id="myInputElement" type="text">

Je ne suis pas contre l'écriture de ma propre solution, je veux juste m'assurer de ne pas recréer la roue ici.

javascriptjqueryhtmleventsforms
75
SeanW

Une meilleure approche consiste à stocker l'ancienne valeur à l'aide de .data. Cela évite la création d'une variable globale dont vous devez rester à l'écart et conserve les informations encapsulées dans l'élément. Un exemple concret expliquant pourquoi Global Vars est si mauvais est documenté ici

par exemple

<script>
    //look no global needed:)

    $(document).ready(function(){
        // Get the initial value
       var $el = $('#myInputElement');
       $el.data('oldVal',  $el.val() );


       $el.change(function(){
            //store new value
            var $this = $(this);
            var newValue = $this.data('newVal', $this.val());
       })
       .focus(function(){
            // Get the value when input gains focus
            var oldValue = $(this).data('oldVal');
       });
    });
</script>
<input id="myInputElement" type="text">
104
redsquare

Cela pourrait faire l'affaire:

$(document).ready(function() {
    $("input[type=text]").change(function() {
        $(this).data("old", $(this).data("new") || "");
        $(this).data("new", $(this).val());
        console.log($(this).data("old"));
        console.log($(this).data("new"));
    });
});

démo ici

16
Salman A
$('#element').on('change', function() {
    $(this).val($(this).prop("defaultValue"));
});
9
Hakadel

Vous pouvez faire copier la valeur du champ de saisie dans un champ caché chaque fois que le focus quitte le champ de saisie (ce qui devrait faire ce que vous voulez). Voir le code ci-dessous:

<script>
    $(document).ready(function(){
        $('#myInputElement').bind('change', function(){
            var newvalue = $(this).val();
        });
        $('#myInputElement').blur(function(){
            $('#myHiddenInput').val($(this).val());
        });
    });
</script>
<input id="myInputElement" type="text">

(non testé, mais cela devrait fonctionner).

4
inkedmn

Chaque élément DOM a un attribut appelé defaultValue. Vous pouvez l'utiliser pour obtenir la valeur par défaut si vous souhaitez simplement comparer le premier changement de données.

2
Joey Guerra

Dans Russ répondre, il lie l'événement focus. Je ne pense pas que ce soit nécessaire.

Vous pouvez stocker l'ancienne valeur dans l'événement change.

<script>
    $(document).ready(function(){

        var newValue = $('#myInputElement').val();
        var oldValue;

        $('#myInputElement').change(function(){
            oldValue = newValue;
            newValue = $(this).val();
        });
    });
</script>
<input id="myInputElement" type="text">
1
Daniel Moura

J'ai créé ces fonctions sur la base de la suggestion de Joey Guerra, merci pour cela. Je développe un peu, peut-être que quelqu'un peut l'utiliser. La première fonction checkDefaults () est appelée lorsqu'une entrée est modifiée, la seconde est appelée lorsque le formulaire est soumis à l'aide de jQuery.post. div.updatesubmit est mon bouton d'envoi et la classe 'needsupdate' indique qu'une mise à jour a été effectuée mais qu'elle n'a pas encore été soumise.

function checkDefaults() {
    var changed = false;
        jQuery('input').each(function(){
            if(this.defaultValue != this.value) {
                changed = true;
            }
        });
        if(changed === true) {
            jQuery('div.updatesubmit').addClass("needsupdate");
        } else {
            jQuery('div.updatesubmit').removeClass("needsupdate");
        }
}

function renewDefaults() {
        jQuery('input').each(function(){
            this.defaultValue = this.value;
        });
        jQuery('div.updatesubmit').removeClass("needsupdate");
}
1
Maarten van Middelaar

Quelques points.

tilisez $ .data au lieu de $ .fn.data

// regular
$(elem).data(key,value);
// 10x faster
$.data(elem,key,value);

Ensuite, vous pouvez obtenir la valeur précédente à travers l'objet event, sans vous compliquer la vie:

    $('#myInputElement').change(function(event){
        var defaultValue = event.target.defaultValue;
        var newValue = event.target.value;
    });

Soyez averti que defaultValue n'est PAS la dernière valeur définie. C'est la valeur avec laquelle le champ a été initialisé. Mais vous pouvez utiliser $ .data pour garder une trace de la "oldValue"

Je vous recommande de toujours déclarer l'objet "événement" dans vos fonctions de gestionnaire d'événements et de les inspecter avec firebug (console.log (événement)) ou quelque chose du genre. Vous y trouverez beaucoup de choses utiles qui vous éviteront de créer/d'accéder à des objets jQuery (ce qui est génial, mais si vous pouvez être plus rapide ...)

1
monzonj

J'ai trouvé un truc sale mais ça marche, vous pouvez utiliser la fonction de survol pour obtenir la valeur avant le changement!

0
Andrea Cammoranesi