web-dev-qa-db-fra.com

l'événement de changement de zone de texte jQuery ne se déclenche que lorsque la zone de texte perd le focus?

J'ai constaté que l'événement de modification jQuery dans une zone de texte ne se déclenche que lorsque je clique en dehors de cette zone.

HTML:

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

JS:

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

Voir 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 on sait que l'événement keyup n'est pas déclenché par un clic droit et collé.

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

jqueryeventstextbox
122
SNag

Le moyen typique de le faire est de se lier aux deux événements. Vous pouvez également vous lier à l'événement de collage.

Vous pouvez vous lier à plusieurs événements comme ceci:

$("#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 connecter à mouseup pour gérer le déplacement de 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('The text box really changed this time');
    }
});

Et si vous voulez être super duper pédant, vous devriez utiliser un minuteur à intervalles 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);
280
Petah

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

DEMO

$("#textbox").on('input',function() {alert("Change detected!");});
80
A. Wolff
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>
4
Milan
$(this).bind('input propertychange', function() {
        //your code here
    });

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

3
Tony Dong

Essaye ça:

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

Voir démo sur JSFiddle .

2
Dhaval Marthak

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

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

Essayez le code ci-dessous:

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