Comment détecter le contenu d'une boîte de texte a changé

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

En jQuery qui est le change() de l'événement. Par exemple:

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

MODIFIER

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' input ' est parfait.

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

Que pensez-vous de ceci:

< 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 en IE8 / IE9, FF, Chrome

utilisez des fermetures pour vous rappeler quel était le texte dans la case à cocher avant la touche et vérifiez si cela a changé.

Oui. Vous ne devez pas nécessairement utiliser des fermetures, mais vous aurez besoin de se rappeler l'ancienne valeur et de la comparer à la nouvelle.

cependant! Cela ne captera toujours pas tous les changements, parce qu'il y a une façon d'éditer le contenu de la boîte de texte qui n'implique pas de keypress. Par exemple la sélection d'une plage de de texte, puis cliquez-droit-coupe. Ou en le faisant glisser. Ou de laisser tomber 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 effectuer un sondage. Vous pouvez window.setInterval pour vérifier le champ par rapport à sa valeur précédente à chaque (disons) seconde. Vous pouvez également raccorder onkeyup à la même fonction de sorte que les changements que sont causés par des touches se reflètent plus rapidement.

encombrant? Oui. Mais c'est ça ou faites-le simplement de la manière HTML onchange normale 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 déprécié dans Jquery-1.7, alors utilisez'on'.

je suppose que vous cherchez à faire quelque chose d'interactif lorsque la boîte de texte change (i.e. récupérer des données via ajax). Je cherchais cette même fonctionnalité. Je sais que l'utilisation d'un global n'est pas la solution la plus robuste ou élégante, mais c'est ce que j'ai fait. 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 puisque je ne veux pas envoyer plusieurs requêtes en même temps. Cela garantit que le timer "s'arrête" lorsque le formulaire est soumis et "commence" lorsque la demande est complète. Je le fais en appelant checkSearchChanged lorsque mon appel ajax est terminé. Évidemment, vous pouvez étendre cela pour vérifier la longueur minimale,etc.

dans mon cas, j'utilise ASP.Net MVC donc vous pouvez voir comment lier ceci avec MVC Ajax ainsi dans le post suivant:

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

je recommande de jeter un oeil à jQuery UI autocomplete widget. Ils ont traité la plupart des cas là-bas puisque leur base de code est plus mature que la plupart de ceux là-bas.

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

vous profiterez le plus de la lecture de la source et de voir comment ils l'ont résolu. Vous pouvez le trouver ici: https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js .

en gros, ils font tout, ils lient à input, keydown, keyup, keypress, focus and blur . Ensuite, ils ont une manipulation spéciale 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. Quand un utilisateur tape une clé qui ne correspond pas à une commande (touche up, touche down, etc.), il y a un minuteur qui explore le contenu après environ 300 millisecondes. Il 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 timer est que L'UI obtient une chance d'être mis à jour. Lorsque Javascript exécute L'UI ne peut pas être mis à jour, donc l'appel à la fonction delay. Cela fonctionne bien pour d'autres situations telles que garder l'accent sur la boîte de texte (utilisé par ce code).

donc vous pouvez 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é).

j'aimerais savoir pourquoi vous essayez de détecter quand le contenu de la boîte de texte a changé en temps réel ?

une alternative serait de régler une minuterie (via setIntval?) et comparez la dernière valeur sauvegardée à la valeur courante, puis réinitialisez une minuterie. Cela garantirait attraper tout changement, qu'il soit causé par des clés, une souris, un autre périphérique d'entrée que vous n'avez pas considéré, ou même JavaScript changer la valeur (une autre possibilité que personne n'a mentionnée) d'un autre partie de l'application.

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

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

utilisez l'événement textchange via jQuery shim personnalisé pour la compatibilité cross-browser input . http://benalpert.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html (dernier bijou fourchu: https://github.com/pandell/jquery-splendid-textchange/blob/master/jquery.splendid.textchange.js )

s'occupe de toutes les étiquettes d'entrée, y compris <textarea>content</textarea> , qui ne fonctionne pas toujours avec change keyup etc. (!) Seulement jQuery on("input propertychange") gère <textarea> tags uniformément, et ce qui précède est un shim pour tous les navigateurs qui ne comprennent pas 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>

cela permet également de coller, supprimer, et ne duplique pas l'effort sur keyup.

si vous n'utilisez pas de cale, utilisez jQuery on("input propertychange") événements.

// 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 cela devrait fonctionner, principalement parce que focus et focusout se terminerait avec deux valeurs séparées. J'utilise data ici parce qu'il stocke des valeurs dans l'élément mais ne touche pas le DOM. C'est aussi un moyen facile de stocker la valeur connecté à son élément. Vous pouvez tout aussi bien utiliser une variable de plus grande portée.

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