Comment implémenter onchange de <input type = “text”> avec jQuery?

Réponses:

220

Vous pouvez utiliser .change()

$('input[name=myInput]').change(function() { ... });

Cependant, cet événement ne se déclenchera que lorsque le sélecteur aura perdu le focus, vous devrez donc cliquer ailleurs pour que cela fonctionne.

Si ce n'est pas tout à fait raison pour vous, vous pouvez utiliser quelques - unes des autres événements de jQuery comme keyup , keydown ou keypress - selon l'effet exact que vous voulez.

Greg
la source
Malheureusement, cela ne fonctionne pas pour une entrée masquée. Une solution possible en cas de besoin d'un changement sur une entrée masquée est: <input type = 'text' style = 'display: none' /> (avec css) ..
NickGreen
304
Notez que changecela ne se déclenchera que lorsque l'élément d'entrée aura perdu le focus. Il y a aussi l' inputévénement qui se déclenche chaque fois que la zone de texte est mise à jour sans qu'il soit nécessaire de perdre le focus. Contrairement aux événements clés, il fonctionne également pour coller / faire glisser du texte.
pimvdb
4
Excellent commentaire @pimvdb. J'ai utilisé ceci et en ai fait une réponse à cette question.
iPadDeveloper2011
1
Pendant que j'essaye ceci, et je viens d'apprendre que l'événement ne se déclenche que lorsque deux conditions sont remplies: 1) changement de valeur; et 2) flou, je me demande si ce que beaucoup de gens attendent du changement () est mieux géré par keyup ()?
TARKUS
Comme changen'est pas pris en charge par IE9, vous pouvez utiliser focusoutpour avoir le même comportement
Soma
247

Comme @pimvdb l'a dit dans son commentaire,

Notez que le changement ne se déclenchera que lorsque l'élément d'entrée aura perdu le focus. Il y a aussi l'événement d'entrée qui se déclenche chaque fois que la zone de texte se met à jour sans qu'elle ait besoin de perdre le focus. Contrairement aux événements clés, il fonctionne également pour coller / faire glisser du texte.

(Voir la documentation .)

C'est tellement utile qu'il vaut la peine de le mettre dans une réponse. Actuellement (v1.8 *?) Il n'y a pas de commodité .input () fn dans jquery, donc la façon de le faire est

$('input.myTextInput').on('input',function(e){
 alert('Changed!')
});
iPadDeveloper2011
la source
6
En particulier, IE <9 ne prend pas du tout en charge.
dlo
13
Puisque vous pouvez vous lier à plusieurs événements, cela a $('form').on('change input', function);fait l'affaire pour moi. Merci.
justnorris
9
@Norris. Cela se déclenchera probablement deux fois lorsqu'un élément est changé (1er) et perd le focus (2ème). Ce n’est pas un problème à bien des égards, mais il convient néanmoins de le noter.
iPadDeveloper2011
Testé à IE9, le retour arrière ne sera pas déclenché
Jaskey
Notez que cela se déclenchera pour chaque changement d'entrée effectué (ce qui pourrait être ce que vous recherchez). Mais si vous recherchez un événement comme "Une fois le changement terminé", voici un excellent exemple .
Trevor Nestman du
79

Je suggérerais d'utiliser l'événement keyup comme ci-dessous:

$('elementName').keyup(function() {
 alert("Key up detected");
});

Il y a plusieurs façons d'obtenir le même résultat, donc je suppose que c'est une question de préférence et dépend de la façon dont vous voulez que cela fonctionne exactement.

Mise à jour: cela ne fonctionne que pour la saisie manuelle, pas pour copier et coller.

Pour copier et coller, je recommanderais ce qui suit:

$('elementName').on('input',function(e){
 // Code here
});
Andrew
la source
Je recommande vivement celui-ci pour les entrées de texte!
Vercas
20
Le contenu de l'élément d'entrée peut être modifié sans que le keyup ne soit déclenché. Par exemple, vous pouvez coller du texte à l'aide de la souris.
celicni
De plus, un changement semble encore nécessaire pour capturer les cases à cocher
turbo2oh
30

Voici le code que j'utilise:

$("#tbSearch").on('change keyup paste', function () {
    ApplyFilter();
});

function ApplyFilter() {
    var searchString = $("#tbSearch").val();
    //  ... etc...
}

<input type="text" id="tbSearch" name="tbSearch" />

Cela fonctionne très bien, en particulier lorsqu'il est associé à un jqGridcontrôle. Vous pouvez simplement taper dans une zone de texte et afficher immédiatement les résultats dans votre fichier jqGrid.

Mike Gledhill
la source
22

Il existe un et un seul moyen fiable de le faire , et c'est en extrayant la valeur dans un intervalle et en la comparant à une valeur mise en cache.

La raison pour laquelle c'est le seul moyen est qu'il existe plusieurs façons de modifier un champ de saisie en utilisant diverses entrées (clavier, souris, coller, historique du navigateur, entrée vocale, etc.) et que vous ne pouvez jamais les détecter toutes en utilisant des événements standard dans une croix. -environnement navigateur.

Heureusement, grâce à l'infrastructure d'événements de jQuery, il est assez facile d'ajouter votre propre événement inputchange. Je l'ai fait ici:

$.event.special.inputchange = {
    setup: function() {
        var self = this, val;
        $.data(this, 'timer', window.setInterval(function() {
            val = self.value;
            if ( $.data( self, 'cache') != val ) {
                $.data( self, 'cache', val );
                $( self ).trigger( 'inputchange' );
            }
        }, 20));
    },
    teardown: function() {
        window.clearInterval( $.data(this, 'timer') );
    },
    add: function() {
        $.data(this, 'cache', this.value);
    }
};

Utilisez-le comme: $('input').on('inputchange', function() { console.log(this.value) });

Il y a une démo ici: http://jsfiddle.net/LGAWY/

Si vous avez peur des intervalles multiples, vous pouvez lier / dissocier cet événement sur focus/ blur.

David Hellsing
la source
Est-il possible de faire fonctionner votre code comme ceci $('body').on('inputchange', 'input', function() { console.log(this.value) });:? Ou pas, comme mentionné ici: github.com/EightMedia/hammer.js/pull/98 ?
TheFrost
13
Ecrire et lancer un tel code est une folie avec un impact extrême sur les performances.
Danubian Sailor
@ ŁukaszLech Veuillez m'en parler. Mais si vous appuyez sur les événements de mise au point / flou comme je l'ai également mentionné, l'intervalle ne fonctionnera que temporairement. Sûrement, même un Intel 386 de 1988 peut gérer un seul intervalle?
David Hellsing
5
<input id="item123" class="firstName" type="text" value="Hello there" data-someattr="CoolExample" />

$(".firstName").on('change keyup paste', function () {
   var element = $(this);
   console.log(element);
   var dataAttribute = $(element).attr("data-someattr");
   console.log("someattr: " + dataAttribute );
});

Je recommande d'utiliser un thismot-clé pour accéder à l'ensemble de l'élément afin que vous puissiez faire tout ce dont vous avez besoin avec cet élément.

Développeur
la source
4

Ce qui suit fonctionnera même s'il s'agit d'appels dynamiques / Ajax.

Scénario:

jQuery('body').on('keyup','input.addressCls',function(){
  console.log('working');
});

Html,

<input class="addressCls" type="text" name="address" value="" required/>

J'espère que ce code de travail aidera quelqu'un qui essaie d'accéder dynamiquement aux appels / Ajax ...

Vinith
la source
3
$("input").keyup(function () {
    alert("Changed!");
});
Phu
la source
2

Vous pouvez simplement travailler avec l'identifiant

$("#your_id").on("change",function() {
    alert(this.value);
});
Siddhesh Mishra
la source
Cela n'ajoute pas grand-chose aux réponses existantes.
Pang
2

Vous pouvez le faire de différentes manières, keyup en fait partie. Mais je donne l'exemple ci-dessous avec le changement.

$('input[name="vat_id"]').on('change', function() {
    if($(this).val().length == 0) {
        alert('Input field is empty');
    }
});

NB: input [name = "vat_id"] remplacer par votre identifiant ou nom d' entrée .

Rokan Nashp
la source
2

Si vous souhaitez déclencher l'événement à mesure que vous tapez , utilisez ce qui suit:

$('input[name=myInput]').on('keyup', function() { ... });

Si vous souhaitez déclencher l'événement en quittant le champ de saisie , utilisez ce qui suit:

$('input[name=myInput]').on('change', function() { ... });
Usman Ahmed
la source
Pour une raison quelconque, cela n'a pas fonctionné pour moi, mais cela a fonctionné:$(document).on('change', 'input[name=myInput]', function() { ... });
Stefan
1
@Stefan, le code de votre exemple est appelé délégation d'événement. Vos champs de saisie doivent s'additionner après l'initialisation de la page, c'est pourquoi mon code n'a pas fonctionné pour vous.
Usman Ahmed
1
$("input").change(function () {
    alert("Changed!");
});
Georg Schölly
la source
4
Le problème de cette option est que cela ne fonctionne que lorsque vous avez perdu le focus d'entrée
Yises
Cela conviendra toujours à certains cas.
James Drinkard
1

Cela a fonctionné pour moi. Si le champ avec le nom fieldA est cliqué ou qu'une clé est entrée, il met à jour le champ avec l'id fieldB .

jQuery("input[name='fieldA']").on("input", function() {
    jQuery('#fieldB').val(jQuery(this).val());
});
Seefan
la source
0

Vous pourriez utiliser .keypress().

Par exemple, considérez le HTML:

<form>
  <fieldset>
    <input id="target" type="text" value="Hello there" />
  </fieldset>
</form>
<div id="other">
  Trigger the handler
</div>

Le gestionnaire d'événements peut être lié au champ d'entrée:

$("#target").keypress(function() {
  alert("Handler for .keypress() called.");
});

Je suis totalement d'accord avec Andy; tout dépend de la façon dont vous voulez que cela fonctionne.

kcho0
la source
1
Cela ne fonctionne pas pour les opérations de copier / coller. Aucun événement n'est déclenché si le texte est collé avec un clic de souris.
DaveN59