web-dev-qa-db-fra.com

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

<select> a cette API. Qu'en est-il de <input>?

jqueryinputonchange
155
omg

Vous pouvez utiliser .change()

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

Toutefois, cet événement ne se déclenchera que lorsque le sélecteur aura perdu le focus. Vous devrez donc cliquer ailleurs pour que ce travail fonctionne.

Si cela ne vous convient pas, vous pouvez utiliser certains des autres événements jQuery tels que keyup , keydown ou keypress -, en fonction de l'effet exact souhaité.

195
Greg

Comme @pimvdb l'a dit dans son commentaire, 

Notez que le changement ne se déclenche que lorsque l'élément d'entrée a perdu la focalisation . Il y a aussi l'événement input qui se déclenche chaque fois que la zone de texte est mise à jour sans avoir besoin de perdre le focus. Contrairement aux événements clés, cela fonctionne également pour coller/glisser du texte.

(Voir documentation .)

C’est tellement utile que cela vaut la peine d’y répondre. Actuellement (v1.8 *?) Il n’existe pas de commodité .nput () dans jquery, la façon de le faire est 

$('input.myTextInput').on('input',function(e){
 alert('Changed!')
});
224
iPadDeveloper2011

Je suggère 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 cela dépend des préférences et dépend de la façon dont vous voulez que cela fonctionne exactement.

Mise à jour: Ceci ne fonctionne que pour une entrée manuelle, pas pour copier et coller.

Pour copier et coller, je recommanderais ce qui suit:

$('elementName').on('input',function(e){
 // Code here
});
73
Andrew

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 assez bien, particulièrement lorsqu'il est associé à un contrôle jqGrid. Vous pouvez simplement taper dans une zone de texte et immédiatement voir les résultats dans votre jqGrid. 

27
Mike Gledhill

Il y a un et un seul moyen fiable de le faire, et consiste à extraire la valeur dans un intervalle et à la comparer à une valeur mise en cache. 

La seule raison en est qu'il existe plusieurs façons de modifier un champ de saisie à l'aide de différentes entrées (clavier, souris, coller, historique du navigateur, entrée vocale, etc.) et que vous ne pouvez jamais les détecter en utilisant des événements standard dans une croix. environnement de navigateur.

Heureusement, grâce à l’infrastructure d’événements de jQuery, il est très 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 de plusieurs intervalles, vous pouvez associer/dissocier cet événement sur focus/blur.

22
David Hellsing
<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 vous recommande d'utiliser le mot clé this afin d'accéder à l'élément entier afin que vous puissiez faire tout ce dont vous avez besoin avec cet élément.

5
Academy of Programmer

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 tente d'accéder de manière dynamique/aux appels Ajax.

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

Vous pouvez simplement travailler avec l'identifiant 

$("#your_id").on("change",function() {
    alert(this.value);
});
2
Siddhesh Mishra

Cela a fonctionné pour moi. Si un champ portant le nom fieldA est sélectionné ou qu'une touche entrée le met à jour, le champ est mis à jour avec l'ID fieldB .

jQuery("input[name='fieldA']").on("input", function() {
    jQuery('#fieldB').val(jQuery(this).val());
});
1
Seefan
$("input").change(function () {
    alert("Changed!");
});
1
Georg Schölly

Vous pouvez utiliser .keypress() .

Par exemple, considérons le code 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 de saisie:

$("#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.

1
kcho0

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"] remplace par votre entréeIDou name .

0
Rokan Nashp