jQuery événement de Modification d'un <input> élément de toute façon à conserver la valeur précédente?

J'ai été la recherche autour de ce matin et je n'ai pas trouver de solutions simples... en gros, je veux capturer un changement d'élément d'entrée, mais aussi de connaître la valeur précédente.

Voici un événement de changement et un élément de saisie dans sa forme la plus simple. Clairement, je peux obtenir la nouvelle valeur avec $(elem).val(), mais est-il une méthode sournoise qui me manque pour arriver à la valeur précédente? Je ne vois rien dans le jQuery API pour le faire, mais peut-être que quelqu'un à déjà fait cela 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 que je ne suis pas recréer la roue ici.

InformationsquelleAutor SeanW | 2009-07-21

103

Une meilleure approche est de stocker de l'ancienne valeur de l'aide .les données. Cette méthode évite la création d'un var qui vous devriez rester loin de et garde les informations encapsulées à l'intérieur de l'élément. Un exemple concret pour expliquer pourquoi les variables Globales sont mauvais est documenté ici

e.g
```
<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">
```
- J'apprends quelque chose de nouveau chaque jour, à propos de jQuery... c'est le premier que j'ai vu de .de données (), donc je vais certainement lire plus à ce sujet aujourd'hui.
- totalement oublié .de données() - nice!
- Je ne connaissais pas .les données. Très sympa 🙂
- Wow... ok, merci, merci, merci de me tourner vers .de données()!!! Je viens de me faire de la lecture sur ce sujet, et ce que cela va changer ma demande à être BEAUCOUP plus facile à gérer. Allés sont à mon habitude, très malade, les attributs de stockage de données. Ok, maintenant, quelle est la bonne StackOverflow étiquette ici - je l'ai déjà marqué une réponse, mais il y a un encore mieux maintenant... dois-je marque ce que c'est?
- Il n'y a pas dur et de définir des règles concernant ce que j'ai vu. Quelle réponse avez-vous envie de voir si vous googlé et trouvé ce Q&A ce demain?
- Du sens. Je serait certainement regarder pour la meilleure réponse. Merci pour votre aide!
- pas de problème Sean, n'importe quand
- OMI, seuls les programmeurs inexpérimentés vont avoir des problèmes avec les variables globales.
- Pas vrai, même MS rendre les variables globales là ms ajax scripts qui peuvent attraper des gens quand ils arrivent au nom de leur contrôle, le même que le mondial var. Def pas un inexpérimenté seul problème
- C'est bien, mais il ressemble à une certaine logique n'est pas tout à fait droit. .data('oldVal') est défini que lorsque la page est chargée et jamais après. Probablement dans le change ou focus les cas, il doit être quelque chose comme $(this).data('oldVal', $(this).val())?
- J'ai pris ce qu'il voulait que la précédente valeur de la valeur lorsque le formulaire a été rendu à l'écran, non pas après chaque changement, tandis que sur l'écran, comme ça n'a aucun sens vraiment
- Être conscient que d'une case à cocher n'est pas toujours le feu un focus événement.
InformationsquelleAutor redsquare
16

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
- J'aime bien cette solution, mais il manque une chose: si la valeur est modifiée par du code javascript (comme dans mon cas) ou si vous avez besoin de l'ancienne valeur pour la première fois ce code ne fonctionne pas. Vous aurez besoin d'ajouter <input data-new="initialValue" /> dans votre code HTML et vous devez remplacer cette valeur sur chaque manipulation.
- Ce devrait être #1
InformationsquelleAutor Salman A
9
```
$('#element').on('change', function() {
    $(this).val($(this).prop("defaultValue"));
});
```
- Le moyen le plus simple pour ce faire, devraient avoir plus de votes. Voir: stackoverflow.com/questions/5244466/...
- Vrai, ce doit être la accepté de répondre: w3schools.com/jsref/prop_text_defaultvalue.asp
- Cela est inexact, selon ma compréhension de valeur. defaultValue est celui qui a été définie au chargement de la page. Valeur précédente (selon ma compréhension) est la valeur du contrôle avant un changement. Si la valeur par défaut est 1 et utilisateur 2, puis à 3, le valeur sera de 2.
InformationsquelleAutor Hakadel
4

Vous pourriez avoir de la valeur du champ de saisie copié dans un champ caché à chaque fois que le focus quitte le champ de saisie (ce qui ne 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 ça devrait fonctionner).
- Ce n'est pas une mauvaise idée... je vais tester. Je me demande si la liaison et le flou des événements incendie dans le même ordre à chaque fois... si oui, cela peut marcher. Sinon, je peut être en mesure d'utiliser les événements de focus, de sorte que lorsqu'un élément est concentré, je stocke la valeur. Ensuite, sur le changement, j'ai les valeurs anciennes et nouvelles... je vais faire quelques tests et voir ce que je peux venir avec.
- J'ai fait quelques tests et la méthode focus fonctionne à merveille. Merci à vous deux pour vos idées/des échantillons!
InformationsquelleAutor inkedmn
2

Chaque élément du DOM est un attribut appelé valeur par défaut. Vous pouvez l'utiliser pour obtenir la valeur par défaut si vous voulez juste pour comparer la première modification de données.

InformationsquelleAutor Joey Guerra
1

Dans Russ réponse qu'il lie les événements de focus. Je ne pense pas que c'est nécessaire.

Vous pouvez stocker l'ancienne valeur dans le changement de l'événement.
```
<script>
    $(document).ready(function(){

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

        $('#myInputElement').change(function(){
            oldValue = newValue;
            newValue = $(this).val();
        });
    });
</script>
<input id="myInputElement" type="text">
```
- Daniel, le problème avec ceci est que vous obtenez seulement l'ancienne valeur une fois. Parce que mon formulaire soumet par l'intermédiaire d'un site web (ajax), le document ne charge que les une fois, mais la forme les valeurs peuvent changer le nombre N de fois. En utilisant la méthode focus, je suis garanti de choisir jusqu'à la nouvelle valeur d'entrée.
- Oh, en fait - je vois ce que vous faites... mon erreur. Ouais, ce serait trop de travail.
InformationsquelleAutor Daniel Moura
1

Certains points.

Utiliser $.données au Lieu de $.fn.les données
```
//regular
$(elem).data(key,value);
//10x faster
$.data(elem,key,value);
```
Ensuite, Vous pouvez obtenir la valeur précédente par le biais de l'objet d'événement, sans pour autant compliquer votre vie:
```
    $('#myInputElement').change(function(event){
        var defaultValue = event.target.defaultValue;
        var newValue = event.target.value;
    });
```
Être averti que la valeur par défaut n'est PAS la dernière valeur. C'est la valeur que le champ est initialisé avec. Mais vous pouvez utiliser $.les données de garder une trace de la "oldValue"

Je vous conseille toujours de vous déclarer "l'événement" de l'objet dans vos fonctions de gestionnaire d'événements et de les contrôler avec firebug (console.journal(event)) ou quelque chose. Vous trouverez beaucoup de choses utiles que vous sauver de la création/l'accès jquery objets (qui sont grands, mais si vous pouvez être plus rapide...)

InformationsquelleAutor monzonj

J'ai créé ces fonctions sont basées sur Joey Guerra de la suggestion, je vous remercie pour cela. Je suis d'élaborer un peu, peut-être quelqu'un peut l'utiliser. La première fonction checkDefaults() est appelée lors d'un changement d'entrée, la seconde est appelée lorsque le formulaire est envoyé à l'aide de jQuery.post. div.updatesubmit est mon bouton submit, et de la classe de needsupdate' est un indicateur qu'une mise à jour est faite mais pas encore soumis.

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");
}

InformationsquelleAutor Maarten van Middelaar

0

J'ai trouvé un sale truc, mais il fonctionne, vous pouvez utiliser la fonction hover pour obtenir la valeur avant de changer!
- Qui ne fonctionne pas si l'utilisateur utilise le clavier pour accéder à la zone de saisie.
- Que penser de l'utilisation focus? qui doit attraper les souris et le clavier
InformationsquelleAutor Andrea Cammoranesi

Vous devez vous connecter pour publier un commentaire.

Démo ici