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

Question

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

Je veux détecter quand les actions du clavier d'un utilisateur modifient la valeur d'un champ de texte. Cela doit fonctionner de manière cohérente sur les navigateurs modernes.

La page JQuery pour l'événement .keypress indique qu'il n'est pas cohérent ? De plus, cela ne fonctionne pas pour le retour arrière, la suppression, etc.

Je ne peux pas utiliser .keydown tel quel car il réagit aux touches shift, alt et flèches, etc. De plus, 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 m'échappe ? Ou devrais-je utiliser .keydown et filtrer les événements qui sont déclenchés par les touches fléchées, shift et ainsi de suite ? Ma principale préoccupation est qu'il y aura des touches dont je ne suis pas conscient qu'elles doivent être filtrées. (J'ai presque oublié alt et ctrl, je suppose qu'il pourrait y en avoir d'autres). Mais alors, comment détecter la touche maintenue enfoncée et l'insertion de plusieurs caractères ?

En prime, il détecterait les modifications dues au collage (y compris le clic droit), mais j'ai la solution à ce problème depuis ici

Merci

Answer 1

Vous pouvez lier l'événement "input" à la zone de texte. Cela déclencherait à chaque fois l'entrée change, donc quand 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 change ce dernier ne se déclenchera qu'une fois que l'utilisateur aura désélectionné la zone de saisie, ce qui n'est peut-être pas ce que vous souhaitez.

Il y a un exemple des deux ici : http://jsfiddle.net/6bSX6/

Answer 2

Utiliser jquery événement de changement

Description : Lier un gestionnaire d'événement à l'événement JavaScript "change", ou déclencher cet événement sur un élément.

Un exemple

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

L'avantage que .change a plus de .keypress , .focus , .blur c'est que .change L'événement ne se déclenchera que lorsque l'entrée a changé

Answer 3

J'ai récemment obtenu la même fonctionnalité en utilisant la fonction ci-dessous.

Je voulais activer le bouton SAVE lors de l'édition.

1. Il est déconseillé d'utiliser l'événement Change, car il ne sera déclenché QUE si, après l'édition, la souris est déplacée ailleurs sur la page avant de cliquer sur le bouton SAVE.
2. Key Press ne gère pas les options Backspace, Delete et Paste.
3. La touche Up gère tout, y compris la tabulation, la touche Shift.

C'est pourquoi j'ai écrit la fonction ci-dessous qui combine les événements keypress, keyup (pour backspace, delete) et paste pour les champs de texte.

J'espère que cela vous aidera.

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

}

Answer 4

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

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

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

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

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

Et voici un exemple de fonctionnement de la change fonctionnant sur un élément de saisie, en utilisant jQuery : http://jsfiddle.net/p1m4xh08/

Answer 5

Vous pouvez utiliser la fonction jQuery change()

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

Vous trouverez des exemples sur la façon de l'utiliser sur la page API : http://api.jquery.com/change/