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

<select>a cette API. Et quoi <input>?

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.

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!')
});

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
});

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.

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.

<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.

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 ...

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

Vous pouvez simplement travailler avec l'identifiant

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

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 .

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() { ... });

$("input").change(function () {
    alert("Changed!");
});

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());
});

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.