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

Je veux détecter chaque fois que le contenu d'une zone de texte a changé. Je peux utiliser la méthode des touches, mais cela 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 ce faire en utilisant l'événement keyup:

1. Vérifiez explicitement si le code ascii de la touche enfoncée est une lettre \ backspace \ delete
2. Utilisez les fermetures pour vous rappeler quel était le texte dans la zone de texte avant le coup de clé et vérifiez si cela a changé.

Les deux semblent un peu encombrants.

Commencez à observer l'événement «entrée» au lieu de «changer».

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

... qui est agréable et propre, mais peut être étendu à:

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

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

Dans jQuery, c'est l' événement change () . Par exemple:

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

ÉDITER

Après avoir lu quelques 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');
        }
    });
});

L'événement «change» ne fonctionne pas correctement, mais l '«entrée» est parfaite.

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

Que dis-tu 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

Utilisez les fermetures pour vous rappeler quel était le texte dans la case à cocher avant le coup de clé et vérifiez si cela a changé.

Oui. Vous n'avez pas besoin d'utiliser nécessairement des fermetures, mais vous devrez vous souvenir de l'ancienne valeur et la comparer à la nouvelle.

Toutefois! Cela n'attrapera toujours pas tous les changements, car il existe des moyens de modifier le contenu de la zone de texte qui n'impliquent aucune pression sur une touche. Par exemple, sélectionner une plage de texte, puis cliquer avec le bouton droit de la souris. Ou en le faisant glisser. Ou déposez du texte d'une autre application dans la zone de texte. Ou changer un mot via la vérification orthographique du navigateur. Ou...

Donc, si vous devez détecter chaque changement, vous devez l'interroger. Vous pouvez window.setIntervalvérifier le champ par rapport à sa valeur précédente toutes les (disons) secondes. Vous pouvez également câbler onkeyupà la même fonction afin que les changements qui sont causés par des frappes de touches se reflètent plus rapidement.

Lourd? Oui. Mais c'est ça ou faites-le simplement de la manière habituelle de changement HTML et n'essayez pas de mettre à jour instantanément.

$(document).on('input','#mytxtBox',function () { 
 console.log($('#mytxtBox').val());
});

Vous pouvez utiliser l'événement 'input' pour détecter le changement de contenu dans la zone de texte. N'utilisez pas «live» pour lier l'événement car il est obsolète dans Jquery-1.7, alors utilisez «on».

Je suppose que vous cherchez à faire quelque chose d'interactif lorsque la zone de texte change (c'est-à-dire récupérer des données via ajax). Je cherchais cette même fonctionnalité. Je sais que l'utilisation d'une solution globale n'est pas la solution la plus robuste ou élégante, mais c'est ce que j'ai choisi. Voici un exemple:

var searchValue = $('#Search').val();
$(function () {
    setTimeout(checkSearchChanged, 0.1);
});

function checkSearchChanged() {
    var currentValue = $('#Search').val();
    if ((currentValue) && currentValue != searchValue && currentValue != '') {
        searchValue = $('#Search').val();
        $('#submit').click();
    }
    else {
        setTimeout(checkSearchChanged, 0.1);
    }
}

Une chose clé à noter ici est que j'utilise setTimeout et non setInterval car je ne veux pas envoyer plusieurs demandes en même temps. Cela garantit que la minuterie "s'arrête" lorsque le formulaire est soumis et "démarre" lorsque la demande est terminée. Je le fais en appelant checkSearchChanged à la fin de mon appel ajax. Évidemment, vous pouvez l'étendre pour vérifier la longueur minimale, etc.

Dans mon cas, j'utilise ASP.Net MVC afin que vous puissiez voir comment lier cela à MVC Ajax également dans l'article suivant:

http://geekswithblogs.net/DougLampe/archive/2010/12/21/simple-interactive-search-with-jquery-and-asp.net-mvc.aspx

Je recommanderais de jeter un œil au widget de saisie semi-automatique de jQuery UI. Ils ont traité la plupart des cas là-bas, car leur base de code est plus mature que la plupart des autres.

Vous trouverez ci-dessous un lien vers une page de démonstration afin que vous puissiez vérifier que cela fonctionne. http://jqueryui.com/demos/autocomplete/#default

Vous obtiendrez le plus d'avantages en lisant la source et en voyant comment ils l'ont résolu. Vous pouvez le trouver ici: https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js .

Fondamentalement, ils font tout, ils se lient à input, keydown, keyup, keypress, focus and blur. Ensuite, ils ont un traitement spécial pour toutes sortes de clés comme page up, page down, up arrow key and down arrow key. Une minuterie est utilisée avant d'obtenir le contenu de la zone de texte. Lorsqu'un utilisateur tape une clé qui ne correspond pas à une commande (touche haut, touche bas, etc.), un temporisateur explore le contenu après environ 300 millisecondes. Cela ressemble à ceci dans le code:

// switch statement in the 
switch( event.keyCode ) {
            //...
            case keyCode.ENTER:
            case keyCode.NUMPAD_ENTER:
                // when menu is open and has focus
                if ( this.menu.active ) {
                    // #6055 - Opera still allows the keypress to occur
                    // which causes forms to submit
                    suppressKeyPress = true;
                    event.preventDefault();
                    this.menu.select( event );
                }
                break;
            default:
                suppressKeyPressRepeat = true;
                // search timeout should be triggered before the input value is changed
                this._searchTimeout( event );
                break;
            }
// ...
// ...
_searchTimeout: function( event ) {
    clearTimeout( this.searching );
    this.searching = this._delay(function() { // * essentially a warpper for a setTimeout call *
        // only search if the value has changed
        if ( this.term !== this._value() ) { // * _value is a wrapper to get the value *
            this.selectedItem = null;
            this.search( null, event );
        }
    }, this.options.delay );
},

La raison d'utiliser un minuteur est pour que l'interface utilisateur ait une chance d'être mise à jour. Lorsque Javascript est en cours d'exécution, l'interface utilisateur ne peut pas être mise à jour, donc l'appel à la fonction de retard. Cela fonctionne bien pour d'autres situations telles que garder le focus sur la zone de texte (utilisée par ce code).

Vous pouvez donc utiliser le widget ou copier le code dans votre propre widget si vous n'utilisez pas jQuery UI (ou dans mon cas, développer un widget personnalisé).

Je voudrais vous demander pourquoi vous essayez de détecter quand le contenu de la zone de texte a changé en temps réel ?

Une alternative serait de définir une minuterie (via setIntval?) Et de comparer la dernière valeur enregistrée à la valeur actuelle, puis de réinitialiser une minuterie. Cela garantirait la capture de N'IMPORTE QUEL changement, qu'il soit causé par les touches, la souris, un autre périphérique d'entrée que vous n'avez pas considéré, ou même que JavaScript change la valeur (une autre possibilité que personne n'a mentionnée) à partir d'une autre partie de l'application.

envisagez-vous d'utiliser l' événement de changement ?

$("#myTextBox").change(function() { alert("content changed"); });

Utilisez l' textchangeévénement via un module d'interface jQuery personnalisé pour la inputcompatibilité entre les navigateurs . http://benalpert.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html (dernier github bifurqué: https://github.com/pandell /jquery-splendid-textchange/blob/master/jquery.splendid.textchange.js )

Ce gère toutes les balises d'entrée , y compris <textarea>content</textarea>, ce qui ne fonctionne pas toujours , change keyupetc. (!) Seulement jQuery on("input propertychange")poignées <textarea>balises de manière cohérente, et ce qui précède est une cale pour tous les navigateurs qui ne comprennent pas l' inputévénement.

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/pandell/jquery-splendid-textchange/master/jquery.splendid.textchange.js"></script>
<meta charset=utf-8 />
<title>splendid textchange test</title>

<script> // this is all you have to do. using splendid.textchange.js

$('textarea').on("textchange",function(){ 
  yourFunctionHere($(this).val());    });  

</script>
</head>
<body>
  <textarea style="height:3em;width:90%"></textarea>
</body>
</html>

Test JS Bin

Cela gère également le collage, la suppression et ne fait pas double emploi avec les touches.

Si vous n'utilisez pas de shim, utilisez les on("input propertychange")événements jQuery .

// works with most recent browsers (use this if not using src="...splendid.textchange.js")

$('textarea').on("input propertychange",function(){ 
  yourFunctionHere($(this).val());    
});  

Il y a un exemple de travail complet ici .

<html>
<title>jQuery Summing</title>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script>
$(document).ready(function() {
$('.calc').on('input', function() {
var t1 = document.getElementById('txt1');
var t2 = document.getElementById('txt2');
var tot=0;
if (parseInt(t1.value))
tot += parseInt(t1.value);
if (parseInt(t2.value))
tot += parseInt(t2.value);
document.getElementById('txt3').value = tot;
});
});
</script>
</head>
<body>
<input type='text' class='calc' id='txt1'>
<input type='text' class='calc' id='txt2'>
<input type='text' id='txt3' readonly>
</body>
</html>

Quelque chose comme ça devrait fonctionner, principalement parce que focuset focusoutse retrouverait avec deux valeurs distinctes. J'utilise dataici car il stocke des valeurs dans l'élément mais ne touche pas le DOM. C'est aussi un moyen simple de stocker la valeur connectée à son élément. Vous pouvez tout aussi facilement utiliser une variable de portée supérieure.

var changed = false;

$('textbox').on('focus', function(e) {
    $(this).data('current-val', $(this).text();
});

$('textbox').on('focusout', function(e) {
    if ($(this).data('current-val') != $(this).text())
        changed = true;
    }
    console.log('Changed Result', changed);
}

Ce code détecte chaque fois que le contenu d'une zone de texte a changé par l'utilisateur et modifié par le code Javascript.

var $myText = jQuery("#textbox");

$myText.data("value", $myText.val());

setInterval(function() {
    var data = $myText.data("value"),
    val = $myText.val();

    if (data !== val) {
        console.log("changed");
        $myText.data("value", val);
    }
}, 100);