web-dev-qa-db-fra.com

Détecter le changement d'entrée dans jQuery?

Lorsque jquery .change est utilisé sur un input, l'événement n'est 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 saisie a été modifiée. Comment pourrais-je accomplir ceci?

javascriptjqueryhtml
345
Banshee

UPDATED pour clarification et exemple

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

Méthode 1. Evénement input

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

Dans jQuery faire ça comme ça

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

en commençant par jQuery 1.7, remplacez bind par on:

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

Méthode 2. Evénement keyup

Pour les navigateurs plus anciens, utilisez l’événement keyup (il se déclenche dès qu’une touche du clavier est relâchée, cet événement peut donner une sorte de faux positif car, lorsque "w" est libéré, la valeur d’entrée est modifiée et l’événement keyup déclenché, mais aussi lorsque la touche "shift" est relâchée, l'événement keyup est déclenché 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 et colle avec le bouton droit de la souris dans le menu contextuel:

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

Méthode 3. Minuterie (setInterval ou setTimeout)

Pour contourner les limitations de keyup, vous pouvez configurer une minuterie pour vérifier périodiquement la valeur de l'entrée afin de déterminer un changement de valeur. Vous pouvez utiliser setInterval ou setTimeout pour effectuer cette vérification du minuteur. Voir la réponse marquée sur cette question SO: événement de changement de zone de texte jQuery ou consultez le violon pour un exemple concret utilisant les événements focus et blur pour démarrer et arrêter le temporisateur pour un champ d'entrée spécifique

521
MikeM

Si vous avez HTML5:

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

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

  • onchange
  • onkeyup (notkeydown ou keypress car la valeur de l'entrée ne contiendra pas encore la nouvelle frappe)
  • onpaste (si supporté)

et peut-être:

  • onmouseup (je ne suis pas sûr de celui-ci)
183
Alnitak

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

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

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

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

Pris en charge par IE9 + et d'autres navigateurs.

Essayez-le en direct dans un jsFiddle ici .

81
Drew Noakes

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

$ input.on ('change keydown keyyp press keyup mousedown clic mouseup', gestionnaire);

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

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

11
Emanuele Del Grande

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

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

// Pour déclencher manuellement, utilisez:

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

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 .

2
Jivings

Il existe des événements jQuery tels que keyup et pression au clavier que vous pouvez utiliser avec des éléments HTML en entrée. Vous pouvez également utiliser l'événement blur ().

1
softwaredeveloper

Cela couvre chaque modification apportée à une entrée utilisant jQuery 1.7 ou une version ultérieure:

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