Comment détecter que le contenu d'une zone de texte a changé ?

Question

Je veux détecter si le contenu d'une zone de texte a été modifié. Je peux utiliser la méthode keyup, mais elle détectera également les frappes qui ne génèrent pas de lettres, comme les touches fléchées. J'ai pensé à deux méthodes pour y parvenir en utilisant l'événement keyup :

1. Vérifiez explicitement si le code ascii de la touche pressée est une lettre. \backspace\delete
2. Utilisez les fermetures pour vous souvenir du texte qui se trouvait dans la zone de texte avant la frappe et vérifiez s'il a changé.

Les deux ont l'air un peu encombrants.

Answer 1

Commencez à observer l'événement "entrée" au lieu du "changement".

jQuery('#some_text_box').on('input', function() {
    // do your stuff
});

...qui est agréable et propre, mais qui pourrait être étendu à d'autres :

jQuery('#some_text_box').on('input propertychange paste', function() {
    // do your stuff
});

Answer 2

Utilisez l'événement onchange en HTML/standard JavaScript.

Dans jQuery, c'est le changer() événement. Par exemple :

$('element').change(function() { // do something } );

EDIT

Après avoir lu certains commentaires, qu'en est-il :

$(function() {
    var content = $('#myContent').val();

    $('#myContent').keyup(function() { 
        if ($('#myContent').val() != content) {
            content = $('#myContent').val();
            alert('Content has been changed');
        }
    });
});

Answer 3

L'événement "change" ne fonctionne pas correctement, mais l'événement "input" est parfait.

$('#your_textbox').bind('input', function() {
    /* This will be fired every time, when textbox's value changes. */
} );

Answer 4

Que dites-vous de ça ?

< jQuery 1.7

$("#input").bind("propertychange change keyup paste input", function(){
    // do stuff;
});

> jQuery 1.7

$("#input").on("propertychange change keyup paste input", function(){
    // do stuff;
});

Cela fonctionne dans IE8/IE9, FF, Chrome.

Answer 5

Utilisez les fermetures pour vous rappeler quel était le texte de la case à cocher avant la frappe de la touche et vérifiez s'il a changé.

Ouaip. Vous ne devez pas nécessairement utiliser des fermetures, mais vous devrez vous souvenir de l'ancienne valeur et la comparer à la nouvelle.

Cependant ! Cela ne permet pas de détecter toutes les modifications, car il existe des moyens de modifier le contenu d'une zone de texte sans avoir à appuyer sur une touche. Par exemple, en sélectionnant une plage de texte puis en la coupant par un clic droit. Ou le faire glisser. Ou en déposant du texte d'une autre application dans la zone de texte. Ou modifier un mot via le correcteur orthographique du navigateur. Ou encore...

Donc, si vous devez détecter chaque changement, vous devez le faire par sondage. Vous pourriez window.setInterval pour vérifier le champ par rapport à sa valeur précédente toutes les secondes (disons). Vous pourriez également câbler onkeyup à la même fonction afin que les changements que sont causés par les pressions sur les touches sont reflétés plus rapidement.

Encombrant ? Oui. Mais c'est ça ou alors il suffit de le faire à la manière normale du HTML onchange et de ne pas essayer de faire une mise à jour instantanée.