JQuery: détecter les changements dans le champ d'entrée [dupliquer]

possibilité de dupliquer:

Jquery: comment détecter le contenu d'une boîte de texte a changé

je veux détecter quand les actions du clavier d'un utilisateur modifient la valeur d'un champ de texte. Il devrait fonctionner de manière cohérente à travers les navigateurs modernes.

Le JQuery, page de pour la .le keypress event dit que ce n'est pas cohérent? En outre, il ne fonctionne pas pour backspace, supprimer etc.

Je ne peux pas utiliser .keydown tel qu'il est parce qu'il réagit aux touches Maj, alt et arrow, etc. De plus, il ne démarre pas plus d'une fois lorsque l'utilisateur tient une clé et que plusieurs caractères sont insérés.

y a-t-il une méthode concise qui me manque? Ou dois-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 clés que je ne suis pas conscient devrait être filtré. (J'ai presque oublié alt et ctrl, Je suppose qu'il pourrait y en avoir d'autres) mais alors comment pourrais-je détecter la clé étant tenue vers le bas et l'insertion de caractères multiples?

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

170
demandé sur Community 2012-10-09 14:10:45

5 réponses

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 le clic droit), supprimez et tapez n'importe quoi.

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

si vous utilisez le handler change , cela ne se déclenche qu'après que l'Utilisateur a désactivé la boîte de saisie, ce qui n'est peut-être pas ce que vous voulez.

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

573
répondu Timm 2012-10-09 10:21:07

Utiliser jquery modifier l'événement

Description: lier un gestionnaire d'événements à 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 est - ce que l'événement .change ne se déclenchera que lorsque l'entrée a changé

8
répondu Sibu 2012-10-09 10:20:42

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

je voulais activer le bouton Enregistrer sur edit.

  1. modifier l'événement n'est pas conseillé car il ne sera lancé que si après l'édition, la souris est cliquée ailleurs sur la page avant de cliquer sur le bouton Enregistrer.
  2. la presse à clé ne gère pas les options Backspace, Delete et Paste.
  3. La touche
  4. gère tout, y compris l'onglet, la touche Shift.

C'est pourquoi j'ai écrit ci-dessous une fonction combinant keypress, keyup (pour backspace, delete) et paste event pour les champs de texte.

J'espère que ça 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();
    });


}
8
répondu R Shah 2012-10-09 10:27:57

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

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

pour répondre à votre question, autant que je sache, à moins que vous n'ayez besoin de lancer un événement sur keydown spécifiquement, 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 élément d'entrée, en utilisant jQuery: http://jsfiddle.net/p1m4xh08/

6
répondu totallyNotLizards 2014-08-28 08:19:31

vous pouvez utiliser la fonction jQuery change ()

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

il y a des exemples d'utilisation sur la page API: http://api.jquery.com/change /

3
répondu RRikesh 2012-10-09 10:14:32