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

Question

< select > possède cette API. Qu'en est-il de < entrée > ?

Answer 1

Vous pouvez utiliser .change ()

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

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

Si cela ne vous convient pas, vous pouvez utiliser certains des événements jQuery comme amélioration de clé , keydown ou appuyez sur la touche - en fonction de l'effet exact souhaité.

Answer 2

Comme @pimvdb l'a dit dans son commentaire,

  

Notez que le changement ne sera déclenché que lorsque l'élément en entrée aura perdu le focus.   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 aussi pour   coller / glisser du texte.

(Voir documentation .)

C’est tellement utile qu’il vaut la peine de le mettre dans une réponse. Actuellement (v1.8 *?), Il n’existe pas de commodité .nput () dans jquery. Le moyen de le faire est donc

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

Answer 3

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

Mise à jour: cela ne fonctionne que pour les entrées manuelles, pas pour copier / coller.

Pour copier et coller, je recommanderais ce qui suit:

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

Answer 4

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 plutôt bien, en particulier lorsqu'il est associé à un contrôle jqGrid . Vous pouvez simplement taper dans une zone de texte et immédiatement afficher les résultats dans votre jqGrid .

Answer 5

Il existe un et un seul moyen fiable de le faire : il 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 toutes les détecter à l'aide d'événements standard. dans un environnement multi-navigateurs.

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

Vous trouverez une démonstration ici: http://jsfiddle.net/LGAWY/

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

Answer 6

<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 ce mot-clé afin de pouvoir accéder à l'intégralité de l'élément afin que vous puissiez faire tout ce dont vous avez besoin avec cet élément.

Answer 7

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

Answer 8

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

Script:

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

Answer 9

Vous pouvez simplement travailler avec l'identifiant

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

Answer 10

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

Answer 11

Cela a fonctionné pour moi. Si vous cliquez sur le champ portant le nom fieldA ou sur une clé entrée, le champ est mis à jour avec l'identifiant fieldB .

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

Answer 12

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.

Answer 13

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

Remarque: entrée [name = "quot.id") remplacez par votre entrée ID ou nom .