L'événement de changement de la zone de texte jQuery ne se déclenche pas tant que la zone de texte ne perd pas le focus?

Question

J'ai trouvé que l'événement de changement jQuery sur une zone de texte ne se déclenche pas tant que je ne clique pas en dehors de la zone de texte.

HTML :

JS :

$("#textbox").change(function() {alert("Changement détecté !");});

Voir démonstration sur JSFiddle

Mon application nécessite que l'événement soit déclenché à chaque changement de caractère dans la zone de texte. J'ai même essayé d'utiliser keyup à la place...

$("#textbox").keyup(function() {alert("Keyup détecté !");});

...mais c'est un fait connu que l'événement keyup n'est pas déclenché lors d'un clic droit et de collage.

Une solution de contournement ? Est-ce que le fait d'avoir les deux écouteurs va poser des problèmes ?

Answer 1

Le moyen habituel de le faire est de lier les deux événements. Vous pouvez aussi lier l'événement de collage.

Vous pouvez lier plusieurs événements de cette manière :

$("#textbox").on('change keyup paste', function() {
    console.log('Je suis sûr que la zone de texte a changé');
});

Si vous voulez être pointilleux à ce sujet, vous devriez également lier le mouseup pour gérer le déplacement du texte, et ajouter une variable lastValue pour vous assurer que le texte a réellement changé :

var lastValue = '';
$("#textbox").on('change keyup paste mouseup', function() {
    if ($(this).val() != lastValue) {
        lastValue = $(this).val();
        console.log('La zone de texte a vraiment changé cette fois-ci');
    }
});

Et si vous voulez être vraiment extrêmement pointilleux, alors vous devriez utiliser un minuteur intervalle pour gérer le remplissage automatique, les plugins, etc :

var lastValue = '';
setInterval(function() {
    if ($("#textbox").val() != lastValue) {
        lastValue = $("#textbox").val();
        console.log('Je suis vraiment sûr que la zone de texte a vraiment changé cette fois-ci');
    }
}, 500);

Answer 2

Sur les navigateurs modernes, vous pouvez utiliser l'événement input:

DEMO

$("#textbox").on('input',function() {alert("Changement détecté!");});

Answer 3

$(this).bind('input propertychange', function() {
        //votre code ici
    });

Cela fonctionne pour la saisie, le collage, le clic droit pour coller, etc.

Answer 4

Essayez ceci :

$("#textbox").bind('paste',function() {alert("Changement détecté!");});

Voir démonstration sur JSFiddle.

Answer 5

Essayez le code ci-dessous :

$("#textbox").on('change keypress paste', function() {
  console.log("Gestionnaire appelé pour .keypress().");
});