Détection du changement de valeur de l'entrée [type = text] dans jQuery


159

Je veux exécuter une fonction à chaque fois que la valeur d'une zone de saisie spécifique change. Cela fonctionne presque avec $('input').keyup(function), mais rien ne se passe lors du collage de texte dans la boîte, par exemple. $input.change(function)se déclenche uniquement lorsque l'entrée est floue, alors comment saurais-je immédiatement chaque fois qu'une zone de texte a changé de valeur?


2
Alors pourquoi ne pas lier les deux keyupet les pasteévénements?
Ilia G

devcurry.com/2009/07/… - Détection des événements couper / copier / coller
BeRecursive

2
@ liho1eye pasteest juste celui auquel j'ai pensé, je préfère écouter un changement définitif plutôt que de penser à tous les différents chemins entrants.
Jeriko

@Jeriko C'est la seule façon dont la valeur peut être modifiée (à côté de la mise à jour évidente via le code js).
Ilia G

Vous souhaitez également capturer Ctlr-X ( cut).
Alexis Wilke

Réponses:


344

rappelez-vous simplement que 'on' est recommandé par rapport à la fonction 'bind', alors essayez toujours d'utiliser un écouteur d'événement comme celui-ci:

$("#myTextBox").on("change paste keyup", function() {
   alert($(this).val()); 
});

Pourquoi pastealors? J'ai d'abord pensé que cela ne fonctionnait que si nous collions quelque chose avec CTRL+V.
Noir du

3
@ NicolasS.Xu: l'attribution directe de valeurs ne déclenche aucun événement DOM
Alejandro Silva

Ce serait encore mieux si vous utilisez console.log()au lieu de alert. Ce serait très ennuyeux pour keyup to alert.
cytsunny

4
@cytsunny oui bien sûr, l'alerte est ennuyeuse, mais dans ce cas, c'est un exemple de code à exécuter lors du changement de valeur, cela peut vraiment être n'importe quelle charge utile que vous voulez.
Alejandro Silva

1
Si vous faites un clic droit et collez, cela renverra la valeur de l'entrée avant le collage.
alstr

104

La description

Vous pouvez le faire en utilisant la .bind()méthode de jQuery . Découvrez le jsFiddle .

Échantillon

HTML

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

jQuery

$("#myTextBox").bind("change paste keyup", function() {
   alert($(this).val()); 
});

Plus d'information



6

vous pouvez également utiliser des événements de zone de texte -

<input id="txt1" type="text" onchange="SetDefault($(this).val());" onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();">

function SetDefault(Text){
  alert(Text);
}

Essaye ça


5

Essaye ça:

En gros, il suffit de tenir compte de chaque événement:

Html:

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

Jquery:

$("#textbox").keyup(function() { 
    alert($(this).val());  
}); 

$("#textbox").change(function() { 
alert($(this).val());  
}); 

3
$("#myTextBox").on("change paste keyup select", function() {
     alert($(this).val());
});

sélectionner pour une suggestion de navigateur


2

Essaye ça:

$("input").bind({
            paste : function(){
                $('#eventresult').text('paste behaviour detected!');
            }
})


0

Cette combinaison d'événements a fonctionné pour moi:

$("#myTextBox").on("input paste", function() {
   alert($(this).val()); 
});

0

NE PAS OUBLIER LE cutou selectEVENTS!

La réponse acceptée est presque parfaite, mais elle oublie les événements cutet select.

cut est déclenché lorsque l'utilisateur coupe du texte (CTRL + X ou par clic droit)

select est déclenché lorsque l'utilisateur sélectionne une option suggérée par le navigateur

Vous devez également les ajouter, en tant que tels:

$("#myTextBox").on("change paste keyup cut select", function() {
   //Do your function 
});
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.