Comment détecter chaque modification apportée à un champ de saisie de texte avec jQuery ?

Capturer chaque modification apportée à une saisie de texte avec jQuery

Détecter toute modification de la valeur d'un champ de texte de saisie, quelle que soit la méthode (par exemple, pressions sur une touche, copie/ coller, modifications JavaScript, saisie semi-automatique). Assurez-vous que la modification est enregistrée immédiatement à l'aide de jQuery.

Solution

Implémentez cette solution robuste et compatible avec les navigateurs à l'aide de .bind() de jQuery :

$('.myElements').each(function() {
   let elem = $(this);

   // Store initial value
   elem.data('oldVal', elem.val());

   // Monitor value alterations
   elem.bind("propertychange change click keyup input paste", function(event) {
      if (elem.data('oldVal') != elem.val()) {
         elem.data('oldVal', elem.val());

         // Custom action upon change
         ...
      }
   });
});

Remarque : Remplacez '.myElements' par le sélecteur de vos champs de saisie.

Pour les versions jQuery 3.0 ou ultérieures, utilisez .on() au lieu de .bind() :

$('.myElements').each(function() {
   let elem = $(this);

   // Store initial value
   elem.data('oldVal', elem.val());

   // Monitor value alterations
   elem.on("propertychange change click keyup input paste", function(event) {
      if (elem.data('oldVal') != elem.val()) {
         elem.data('oldVal', elem.val());

         // Custom action upon change
         ...
      }
   });
});

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!