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?

Jeriko
la source
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()); 
});
Alejandro Silva
la source
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

dknaack
la source
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

Ishan Jain
la source
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());  
}); 
H Bellamy
la source
3
$("#myTextBox").on("change paste keyup select", function() {
     alert($(this).val());
});

sélectionner pour une suggestion de navigateur

mohamad yazdanpanah
la source
2

Essaye ça:

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

Utilisez ceci: https://github.com/gilamran/JQuery-Plugin-AnyChange

Il gère toutes les façons de modifier l'entrée, y compris le menu de contenu (à l'aide de la souris)

gilamran
la source
Comment l'utilisez-vous? Je l'inclus dans mon HTML et utilise $ ("input"). AnyChange (function (e) {console.log (e);}); Mais il n'est jamais arrivé à la ligne console.log
Ofer Gal
0

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

$("#myTextBox").on("input paste", function() {
   alert($(this).val()); 
});
Nole
la source
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 
});
Oscar Chambers
la source