L'événement de changement de zone de texte jQuery ne se déclenche pas jusqu'à ce que la zone de texte perde le focus?

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:

<input type="text" id="textbox" />

JS:

$("#textbox").change(function() {alert("Change detected!");});

Voir la démo 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 detected!");});

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

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

Lier les deux événements est la manière typique de le faire. Vous pouvez également vous lier à l'événement de collage.

Vous pouvez vous lier à plusieurs événements comme celui-ci:

$("#textbox").on('change keyup paste', function() {
    console.log('I am pretty sure the text box changed');
});

Si vous voulez être pédant à ce sujet, vous devez également vous lier à mouseup pour permettre de faire glisser du texte et ajouter une lastValuevariable 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('The text box really changed this time');
    }
});

Et si vous voulez être super duperpédant, vous devez utiliser une minuterie d'intervalle pour prendre en charge le remplissage automatique, les plugins, etc.

var lastValue = '';
setInterval(function() {
    if ($("#textbox").val() != lastValue) {
        lastValue = $("#textbox").val();
        console.log('I am definitely sure the text box realy realy changed this time');
    }
}, 500);

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

DEMO

$("#textbox").on('input',function() {alert("Change detected!");});

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

Cela fonctionne pour taper, coller, coller avec le bouton droit de la souris, etc.

if you write anything in your textbox, the event gets fired.
code as follows :

HTML:

<input type="text" id="textbox" />

JS:

<script type="text/javascript">
  $(function () {
      $("#textbox").bind('input', function() {
      alert("letter entered");
      });
   });
</script>

Essaye ça:

$("#textbox").bind('paste',function() {alert("Change detected!");});

Voir la démo sur JSFiddle .

Essayez le code ci-dessous:

$("#textbox").on('change keypress paste', function() {
  console.log("Handler for .keypress() called.");
});

La lecture de vos commentaires m'a amené à une mauvaise solution. Ce n'est pas une bonne façon, je le sais, mais cela peut être une solution.

$(function() {
    $( "#inputFieldId" ).autocomplete({
        source: function( event, ui ) {
            alert("do your functions here");
            return false;
        }
    });
});