Détecter toutes les modifications d'un <input type="text"> (immédiatement) en utilisant JQuery

Question

Il existe de nombreuses façons d'évaluer la valeur d'un <input type="text"> peuvent changer, notamment :

• pressions sur les touches
• copier/coller
• modifié avec JavaScript
• auto-complété par le navigateur ou une barre d'outils

Je veux que ma fonction JavaScript soit appelée (avec la valeur d'entrée actuelle) chaque fois qu'elle change. Et je veux qu'elle soit appelée immédiatement, et pas seulement lorsque l'entrée perd le focus.

Je cherche le moyen le plus propre et le plus robuste de le faire sur tous les navigateurs (en utilisant jQuery de préférence).

Answer 1

Ce code jQuery capte les changements immédiats de tout élément et devrait fonctionner sur tous les navigateurs :

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

   // Save current value of element
   elem.data('oldVal', elem.val());

   // Look for changes in the value
   elem.bind("propertychange change click keyup input paste", function(event){
      // If value has changed...
      if (elem.data('oldVal') != elem.val()) {
       // Updated stored value
       elem.data('oldVal', elem.val());

       // Do action
       ....
     }
   });
 });

Answer 2

Une solution de fantaisie en temps réel pour jQuery >= 1.9

$("#input-id").on("change keyup paste", function(){
    dosomething();
})

si vous voulez aussi détecter l'événement "click", il suffit de :

$("#input-id").on("change keyup paste click", function(){
    dosomething();
})

si vous utilisez jQuery <= 1.4, utilisez simplement live au lieu de on .

Answer 3

Malheureusement, je pense setInterval remporte le prix :

<input type=text id=input_id />
<script>
setInterval(function() { ObserveInputValue($('#input_id').val()); }, 100);
</script>

C'est la solution la plus propre, avec seulement une ligne de code. C'est aussi la plus robuste, puisque vous n'avez pas à vous soucier de tous les différents événements/manières dont une action de input peut obtenir une valeur.

Les inconvénients de l'utilisation de "setInterval" ne semblent pas s'appliquer dans ce cas :

• La latence de 100 ms ? Pour de nombreuses applications, 100 ms est une vitesse suffisante.
• Charge supplémentaire sur le navigateur ? En général, l'ajout d'un grand nombre de setIntervals lourds sur votre page est mauvais. Mais dans ce cas particulier, la charge supplémentaire de la page est indétectable.
• Il ne s'adapte pas à de nombreuses entrées ? La plupart des pages n'ont pas plus d'une poignée d'entrées, que vous pouvez renifler toutes dans le même setInterval.

Answer 4

Lié à la oninput semble fonctionner correctement dans la plupart des navigateurs sains d'esprit. IE9 le prend également en charge, mais son implémentation est boguée (l'événement n'est pas déclenché lors de la suppression de caractères).

Avec la version 1.7 et plus de jQuery, la fonction on est utile pour se lier à l'événement comme ceci :

$(".inputElement").on("input", null, null, callbackFunction);

Answer 5

Malheureusement, aucun événement ou ensemble d'événements ne correspond à vos critères. Les pressions sur les touches et les copier/coller peuvent tous deux être gérés par la fonction keyup événement. Les modifications par JS sont plus délicates. Si vous avez le contrôle du code qui définit la zone de texte, votre meilleure chance est de le modifier pour qu'il appelle directement votre fonction ou déclenche un événement utilisateur sur la zone de texte :

// Compare the textbox's current and last value.  Report a change to the console.
function watchTextbox() {
  var txtInput = $('#txtInput');
  var lastValue = txtInput.data('lastValue');
  var currentValue = txtInput.val();
  if (lastValue != currentValue) {
    console.log('Value changed from ' + lastValue + ' to ' + currentValue);
    txtInput.data('lastValue', currentValue);
  }
}

// Record the initial value of the textbox.
$('#txtInput').data('lastValue', $('#txtInput').val());

// Bind to the keypress and user-defined set event.
$('#txtInput').bind('keypress set', null, watchTextbox);

// Example of JS code triggering the user event
$('#btnSetText').click(function (ev) {
  $('#txtInput').val('abc def').trigger('set');
});

Si vous n'avez pas le contrôle de ce code, vous pouvez utiliser setInterval() pour "surveiller" les modifications apportées à la zone de texte :

// Check the textbox every 100 milliseconds.  This seems to be pretty responsive.
setInterval(watchTextbox, 100);

Ce type de surveillance active ne permet pas d'obtenir des mises à jour "immédiatement", mais elle semble suffisamment rapide pour qu'aucun décalage ne soit perceptible. Comme DrLouie l'a souligné dans les commentaires, cette solution n'est probablement pas adaptée si vous devez surveiller de nombreuses entrées. Vous pouvez toujours ajuster le 2ème paramètre à setInterval() pour vérifier plus ou moins fréquemment.