web-dev-qa-db-fra.com

JQuery peut-il vérifier si le contenu saisi a changé?

Est-il possible de lier un événement javascript (jQuery is best) à une "modification" de la valeur d'entrée du formulaire? 

Je connais la méthode .change(), mais elle ne se déclenche pas tant que vous (le curseur) ne quittez pas le champ de saisie. J'ai également envisagé d'utiliser la méthode .keyup() mais elle réagit également sur les touches fléchées, etc. 

Il me suffit de déclencher une action à chaque fois le texte de l'entrée change, même s'il ne s'agit que d'une lettre.

javascriptjqueryinputonchange
45
Pavel S.

Il existe une solution simple, à savoir l'événement HTML5 input. Il est pris en charge dans les versions actuelles de tous les principaux navigateurs pour les éléments <input type="text"> et il existe une solution de contournement simple pour IE <9. Voir les réponses suivantes pour plus de détails:

Exemple (sauf IE <9: voir les liens ci-dessus pour une solution de contournement):

$("#your_id").on("input", function() {
    alert("Change to " + this.value);
});
72
Tim Down

Oui, comparez-le à la valeur qu'il était avant que cela change.

var previousValue = $("#Elm").val();
$("#Elm").keyup(function(e) {
    var currentValue = $(this).val();
    if(currentValue != previousValue) {
         previousValue = currentValue;
         alert("Value changed!");
    }
});

Une autre option consiste à ne déclencher que la fonction modifiée sur certaines touches. Utilisez e.KeyCode pour déterminer quelle touche a été enfoncée.

13
alexn
function checkChange($this){
    var value = $this.val();      
    var sv=$this.data("stored");            
        if(value!=sv)
            $this.trigger("simpleChange");    
}

$(document).ready(function(){
    $(this).data("stored",$(this).val());   
        $("input").bind("keyup",function(e){  
        checkChange($(this));
    });        
    $("input").bind("simpleChange",function(e){
        alert("the value is chaneged");
    });        
});

voici le violon http://jsfiddle.net/Q9PqT/1/

7
Rafay

Vous pouvez également stocker la valeur initiale dans un attribut de données et le tester avec la valeur actuelle.

<input type="text" name="somename" id="id_someid" value="" data-initial="your initial value" /> 

$("#id_someid").keyup(function() {
    return $(this).val() == $(this).data().initial;
});

Renvoie true si la valeur initiale n'a pas changé.

5
Kwaw Annor

Vous pouvez utiliser les données dans jQuery et capturer tous les événements qui les testent ensuite avec sa dernière valeur (non testée):

$(document).ready(function() {  
    $("#fieldId").bind("keyup keydown keypress change blur", function() {
        if ($(this).val() != jQuery.data(this, "lastvalue") {
         alert("changed");
        }
        jQuery.data(this, "lastvalue", $(this).val());
    });
});

Cela fonctionnerait très bien contre une longue liste d'éléments aussi. Utiliser jQuery.data signifie qu'il n'est pas nécessaire de créer une variable javascript pour suivre la valeur. Vous pouvez faire $("#fieldId1, #fieldId2, #fieldId3, #fieldId14, etc") pour suivre plusieurs champs.

UPDATE: Ajout de blur à la liste bind.

2
jwatts1980

Vous pouvez définir des événements sur une combinaison d'événements de clé et de souris, ainsi que sur blur, pour vous en assurer. Dans ce cas, stockez la valeur de l'entrée. Lors du prochain appel, comparez la valeur actuelle à la dernière valeur enregistrée. Ne faites votre magie que si elle a réellement changé.

Pour le faire de manière plus ou moins propre:

Vous pouvez associer des données à un élément DOM (lookup api.jquery.com/jQuery.data). Vous pouvez ainsi écrire un ensemble générique de gestionnaires d'événements affectés à tous les éléments du formulaire. Chaque événement peut transmettre l'élément par lequel il a été déclenché à une fonction générique. Cette fonction peut ajouter l'ancienne valeur aux données de l'élément. De cette façon, vous devriez être capable de l'implémenter comme un morceau de code générique qui fonctionne sur votre formulaire entier et sur chaque formulaire que vous allez écrire à partir de maintenant. :) Et je suppose que cela ne prendra probablement pas plus de 20 lignes de code.

Un exemple est dans ce violon: http://jsfiddle.net/zeEwX/

1
GolezTrol

Je devais utiliser ce genre de code pour un scanner qui collait des choses sur le terrain

$(document).ready(function() {
  var tId,oldVal;
  $("#fieldId").focus(function() {
     oldVal = $("#fieldId").val();
     tId=setInterval(function() { 
      var newVal = $("#fieldId").val(); 
      if (oldVal!=newVal) oldVal=newVal;
      someaction() },100);
  });
  $("#fieldId").blur(function(){ clearInterval(tId)});
});

Pas testé...

1
mplungjan

Je ne pense pas qu'il existe une solution «simple». Vous devrez probablement utiliser à la fois les événements onKeyUp et onChange pour pouvoir également détecter les modifications effectuées avec la souris. Chaque fois que votre code est appelé, vous pouvez stocker la valeur que vous avez "vue" sur this.seenValue attachée à droite du champ. Cela devrait rendre un peu plus facile.

1
Sarel Botha

Étant donné que l'utilisateur peut aller dans le menu du système d'exploitation et sélectionner Coller à l'aide de la souris, aucun événement sécurisé ne le déclenchera pour vous. La seule façon dont j'ai trouvé que cela fonctionne toujours est d'avoir un setInterval qui vérifie si la valeur d'entrée a changé:

var inp = $('#input'),
    val = saved = inp.val(),
    tid = setInterval(function() {
        val = inp.val();
        if ( saved != val ) {
            console.log('#input has changed');
            saved = val;
    },50);

Vous pouvez également configurer cela à l'aide d'un événement spécial jQuery.

0
David Hellsing