Détection d'un changement d'entrée dans jQuery?

Lors de l'utilisation de jquery .changesur un inputévénement, l'événement ne sera déclenché que lorsque l'entrée perd le focus

Dans mon cas, je dois appeler le service (vérifier si la valeur est valide) dès que la valeur d'entrée est modifiée. Comment pourrais-je accomplir cela?

MISE À JOUR pour clarification et exemple

exemples: http://jsfiddle.net/pxfunc/5kpeJ/

Méthode 1. inputévénement

Dans les navigateurs modernes, utilisez l' inputévénement. Cet événement se déclenche lorsque l'utilisateur tape dans un champ de texte, colle, annule, essentiellement à chaque fois que la valeur change d'une valeur à une autre.

Dans jQuery, faites ça comme ça

$('#someInput').bind('input', function() { 
    $(this).val() // get the current value of the input field.
});

à partir de jQuery 1.7, remplacez bindpar on:

$('#someInput').on('input', function() { 
    $(this).val() // get the current value of the input field.
});

Méthode 2. keyupévénement

Pour les navigateurs plus anciens, utilisez l' keyupévénement (cela se déclenche une fois qu'une touche du clavier a été relâchée, cet événement peut donner une sorte de faux positif car lorsque "w" est relâché, la valeur d'entrée est modifiée et l' keyupévénement se déclenche, mais aussi lorsque le la touche "shift" est relâchée, l' keyupévénement se déclenche mais aucune modification n'a été apportée à l'entrée.). De plus, cette méthode ne se déclenche pas si l'utilisateur clique avec le bouton droit et colle dans le menu contextuel:

$('#someInput').keyup(function() {
    $(this).val() // get the current value of the input field.
});

Méthode 3. Minuterie ( setIntervalou setTimeout)

Pour contourner les limites de keyupvous pouvez définir une minuterie pour vérifier périodiquement la valeur de l'entrée afin de déterminer un changement de valeur. Vous pouvez utiliser setIntervalou setTimeoutpour effectuer cette vérification de la minuterie. Voir la réponse marquée à cette question SO: événement de changement de zone de texte jQuery ou voir le violon pour un exemple de travail utilisant focuset blurévénements pour démarrer et arrêter le chronomètre pour un champ de saisie spécifique

Si vous avez HTML5:

• oninput (se déclenche uniquement lorsqu'un changement se produit, mais le fait immédiatement)

Sinon, vous devez vérifier tous ces événements qui pourraient indiquer une modification de la valeur de l'élément d'entrée:

• onchange
• onkeyup( pas keydown oukeypress car la valeur de l'entrée n'aura pas encore la nouvelle touche)
• onpaste (lorsque pris en charge)

et peut-être:

• onmouseup (Je ne suis pas sûr de celui-ci)

Avec HTML5 et sans utiliser jQuery, vous pouvez utiliser l' inputévénement :

var input = document.querySelector('input');

input.addEventListener('input', function()
{
    console.log('input changed to: ', input.value);
});

Cela se déclenchera chaque fois que le texte de l'entrée change.

Pris en charge dans IE9 + et autres navigateurs.

Essayez-le en direct dans un jsFiddle ici .

Comme d'autres l'ont déjà suggéré, la solution dans votre cas est de renifler plusieurs événements .
Les plugins faisant ce travail écoutent souvent les événements suivants:

$ input . on ( 'change keydowndown keypress keyup mousedown click mouseup' , handler );

Si vous pensez que cela peut vous convenir, vous pouvez l'ajouter focus, blurainsi que d'autres événements.
Je suggère de ne pas dépasser dans les événements à écouter, car il charge dans la mémoire du navigateur d'autres procédures à exécuter en fonction du comportement de l'utilisateur.

Attention: notez que la modification de la valeur d'un élément d'entrée avec JavaScript (par exemple via la .val()méthode jQuery ) ne déclenchera aucun des événements ci-dessus.
(Référence: https://api.jquery.com/change/ ).

Si vous souhaitez que l'événement soit déclenché chaque fois que quelque chose est modifié dans l'élément, vous pouvez utiliser l' événement keyup .

// .blur est déclenché lorsque l'élément perd le focus

$('#target').blur(function() {
  alert($(this).val());
});

// Pour déclencher manuellement, utilisez:

$('#target').blur();

Il existe des événements jQuery comme les touches et les touches que vous pouvez utiliser avec les éléments HTML d'entrée. Vous pouvez également utiliser l' événement blur () .

Cela couvre toutes les modifications apportées à une entrée à l'aide de jQuery 1.7 et versions ultérieures:

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