JQuery peut-il vérifier si le contenu d'entrée a changé?

est-il possible de lier javascript (jQuery est le meilleur) événement à" changer " la valeur d'entrée de forme d'une façon ou d'une autre?

je connais la méthode .change() , mais elle ne se déclenche pas tant que vous (le curseur) n'avez pas quitté le champ d'entrée. J'ai également envisagé d'utiliser la méthode .keyup() mais elle réagit aussi sur les touches fléchées et ainsi de suite.

j'ai juste besoin de déclencher une action à chaque fois le texte de l'entrée de changements, même si c'est une seule lettre changement.

44
demandé sur Pavel S. 2011-09-24 01:09:19

9 réponses

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

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

$("#your_id").on("input", function() {
    alert("Change to " + this.value);
});
70
répondu Tim Down 2017-05-23 11:47:13

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

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

une autre option est de ne déclencher votre fonction modifiée que sur certaines touches. Utilisez e.KeyCode pour déterminer quelle touche a été pressée.

12
répondu alexn 2011-09-23 21:13:23
   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
répondu Rafay 2011-09-23 21:40:02

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

<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 vrai si la valeur initiale n'a pas changé.

5
répondu Kwaw Annor 2018-07-13 08:36:31

vous pouvez employer l'utilisation de données dans jQuery et attraper tous les événements qui le testent alors contre 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 assez bien contre une longue liste d'articles aussi. Utiliser jQuery.data signifie que vous n'avez pas besoin de créer une variable javascript pour suivre la valeur. Vous pouvez faire $("#fieldId1, #fieldId2, #fieldId3, #fieldId14, etc") pour suivre de nombreux champs.

mise à jour: Ajouté blur à la liste bind .

2
répondu jwatts1980 2011-09-28 16:11:28

j'ai dû utiliser ce genre de code pour un scanner qui collait des trucs dans le champ

$(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)});
});

non testé...

1
répondu mplungjan 2011-09-23 21:20:44

Je ne pense pas qu'il y ait une solution "simple". Vous aurez probablement besoin d'utiliser à la fois les events onKeyUp et onChange de sorte que vous attrapez aussi quand les changements sont faits avec la souris. Chaque fois que votre code est appelée, vous pouvez stocker la valeur que vous avez " vu " sur ce.seenValue attaché au champ. Cela devrait rendre un peu plus facile.

1
répondu Sarel Botha 2011-09-23 21:28:42

vous pouvez définir des événements sur une combinaison d'événements clé et souris, et onblur ainsi, pour être sûr. Dans ce cas, stockez la valeur de l'entrée. Dans l'appel suivant, comparez la valeur courante avec la dernière valeur stockée. Ne faites votre magie que si elle a réellement changé.

Pour ce faire, dans une plus ou moins propre:

vous pouvez associer des données avec un élément DOM (recherche api.jquery.com/jQuery.data ) vous pouvez donc écrire un ensemble générique de gestionnaires d'événements qui sont assignés à tous les éléments du formulaire. Chaque événement peut passer l'élément il a été provoqué par 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 en mesure d'implémenter ceci comme un morceau de code générique qui fonctionne sur l'ensemble de votre forme et toutes les formes que vous écrirez à partir de maintenant. :) Et cela prendra probablement pas plus de 20 lignes de code, je suppose.

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

1
répondu GolezTrol 2011-09-23 21:51:36

puisque l'utilisateur peut aller dans le menu OS et sélectionner coller à l'aide de sa souris, il n'y a aucun événement sûr qui va déclencher cela pour vous. Le seul moyen que j'ai trouvé qui fonctionne toujours, c'est 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 en utilisant un événement spécial jQuery.

0
répondu David 2011-09-24 06:59:30