web-dev-qa-db-fra.com

JQuery: détecter le changement dans le champ de saisie

Duplicate possible:
Jquery: comment détecter le contenu d'une zone de texte a changé

Je souhaite détecter le moment où les actions du clavier d'un utilisateur modifient la valeur d'un champ de texte. Il devrait fonctionner de manière cohérente sur les navigateurs modernes.

La page JQuery pour l'événement .keypress indique que ce n'est pas cohérent? En outre, cela ne fonctionne pas pour le retour arrière, supprimer etc.

Je ne peux pas utiliser .keydown tel quel car il réagit aux touches Maj, Alt et les touches fléchées, etc. En outre, il ne se déclenche pas plus d'une fois lorsque l'utilisateur maintient une touche enfoncée et que plusieurs caractères sont insérés.

Y a-t-il une méthode concise qui me manque? Ou devrais-je utiliser .keydown et filtrer les événements déclenchés par les touches fléchées, shift, etc.? Ma principale préoccupation est qu'il y aura des clés que je ne sais pas qui devraient être filtrées. (J'ai failli oublier alt et ctrl, je suppose qu'il pourrait y en avoir d'autres) Mais alors, comment pourrais-je détecter que la touche est maintenue enfoncée et que plusieurs caractères sont insérés?

En prime, il détecterait les changements dus au collage (y compris le clic droit) mais j'ai la solution à cela de ici .

jquerykeypress
198
CL22

Vous pouvez lier l'événement 'input' à la zone de texte. Cela déclencherait chaque fois que l'entrée serait modifiée. Ainsi, lorsque vous collez quelque chose (même avec un clic droit), supprimez et tapez n'importe quoi.

$('#myTextbox').on('input', function() {
    // do something
});

Si vous utilisez le gestionnaire change, il ne se déclenchera que lorsque l'utilisateur aura désélectionné le champ de saisie, ce qui risque de ne pas correspondre à vos souhaits.

Voici un exemple des deux: http://jsfiddle.net/6bSX6/

642
Timm

Utilisez jquery change event

Description: Liez un gestionnaire d’événements à l’événement JavaScript "changer" ou déclenchez cet événement sur un élément.

Un exemple

$("input[type='text']").change( function() {
  // your code
});

L'avantage que .change a sur .keypress, .focus, .blur est que l'événement .change ne se déclenche que lorsque l'entrée a changé

12
Sibu

Même fonctionnalité que j'ai récemment obtenue en utilisant la fonction ci-dessous.

Je voulais activer le bouton SAVE en édition.

  1. Le changement d’événement n’est PAS conseillé car il sera UNIQUEMENT déclenché si, après l’édition, on clique avec la souris quelque part sur la page avant de cliquer sur le bouton ENREGISTRER.
  2. Une pression sur une touche ne gère pas les options Retour arrière, Supprimer et Coller.
  3. Key Up gère tout, y compris l'onglet, la touche Maj.

Par conséquent, j’ai écrit ci-dessous la fonction qui combine les touches Keypress, Keyup (pour le retour arrière, supprimer) et l’événement coller pour les champs de texte.

J'espère que ça vous aide.

function checkAnyFormFieldEdited() {
    /*
     * If any field is edited,then only it will enable Save button
     */
    $(':text').keypress(function(e) { // text written
        enableSaveBtn();
    });

    $(':text').keyup(function(e) {
        if (e.keyCode == 8 || e.keyCode == 46) { //backspace and delete key
            enableSaveBtn();
        } else { // rest ignore
            e.preventDefault();
        }
    });
    $(':text').bind('paste', function(e) { // text pasted
        enableSaveBtn();
    });

    $('select').change(function(e) { // select element changed
        enableSaveBtn();
    });

    $(':radio').change(function(e) { // radio changed
        enableSaveBtn();
    });

    $(':password').keypress(function(e) { // password written
        enableSaveBtn();
    });
    $(':password').bind('paste', function(e) { // password pasted
        enableSaveBtn();
    });


}
9
R Shah

Utilisez $.on() pour lier l’événement choisi à l’entrée, n’utilisez pas les raccourcis tels que $.keydown() etc car, à partir de jQuery 1.7, $.on() est la méthode recommandée pour attacher des gestionnaires d’événements (voir: http: // api .jquery.com/on/ et http://api.jquery.com/bind/ ).

$.keydown() est juste un raccourci vers $.bind('keydown'), et $.bind() est ce que $.on() remplace (entre autres).

Pour autant que je sache, pour répondre à votre question, à moins que vous n'ayez besoin de déclencher un événement sur keydown, l'événement change devrait faire l'affaire pour vous.

$('element').on('change', function(){
    console.log('change');
});

Pour répondre au commentaire ci-dessous, l'événement javascript change est documenté ici: https://developer.mozilla.org/en-US/docs/Web/Events/change

Et voici un exemple de travail de l'événement change sur un élément d'entrée, à l'aide de jQuery: http://jsfiddle.net/p1m4xh08/

8
totallyNotLizards

Vous pouvez utiliser la fonction jQuery change ()

$('input').change(function(){
  //your codes
});

Il existe des exemples d'utilisation de la page API: http://api.jquery.com/change/

3
RRikesh