Détecter (immédiatement) toutes les modifications apportées à un <type d'entrée = "texte"> à l'aide de JQuery

Il existe de nombreuses façons dont la valeur d'un <input type="text">peut changer, notamment:

• touches
• copier coller
• modifié avec JavaScript
• renseigné automatiquement par un navigateur ou une barre d'outils

Je veux que ma fonction JavaScript soit appelée (avec la valeur d'entrée actuelle) chaque fois qu'elle change. Et je veux qu'il soit appelé immédiatement, pas seulement lorsque l'entrée perd le focus.

Je recherche le moyen le plus propre et le plus robuste de le faire sur tous les navigateurs (en utilisant jQuery de préférence).

Ce code jQuery intercepte les modifications immédiates de n'importe quel élément et devrait fonctionner sur tous les navigateurs:

 $('.myElements').each(function() {
   var elem = $(this);

   // Save current value of element
   elem.data('oldVal', elem.val());

   // Look for changes in the value
   elem.bind("propertychange change click keyup input paste", function(event){
      // If value has changed...
      if (elem.data('oldVal') != elem.val()) {
       // Updated stored value
       elem.data('oldVal', elem.val());

       // Do action
       ....
     }
   });
 });

Une solution fantaisie en temps réel pour jQuery> = 1.9

$("#input-id").on("change keyup paste", function(){
    dosomething();
})

si vous souhaitez également détecter l'événement "clic", il suffit de:

$("#input-id").on("change keyup paste click", function(){
    dosomething();
})

si vous utilisez jQuery <= 1.4, utilisez simplement liveau lieu de on.

Malheureusement, je pense que setIntervalremporte le prix:

<input type=text id=input_id />
<script>
setInterval(function() { ObserveInputValue($('#input_id').val()); }, 100);
</script>

C'est la solution la plus propre, avec seulement 1 ligne de code. C'est aussi le plus robuste, car vous n'avez pas à vous soucier de tous les différents événements / façons dont un inputpeut obtenir une valeur.

Les inconvénients de l'utilisation de «setInterval» ne semblent pas s'appliquer dans ce cas:

• La latence de 100 ms? Pour de nombreuses applications, 100 ms est assez rapide.
• Charge ajoutée sur le navigateur? En général, l'ajout de nombreux intervalles setIntervals lourds sur votre page est mauvais. Mais dans ce cas particulier, le chargement de page ajouté est indétectable.
• Il ne s'adapte pas à de nombreuses entrées? La plupart des pages n'ont pas plus d'une poignée d'entrées, que vous pouvez renifler toutes dans le même setInterval.

La liaison à l' oninputévénement semble fonctionner correctement dans la plupart des navigateurs sensés. IE9 le prend également en charge, mais l'implémentation est boguée (l'événement n'est pas déclenché lors de la suppression de caractères).

Avec jQuery version 1.7+, la onméthode est utile pour se lier à l'événement comme ceci:

$(".inputElement").on("input", null, null, callbackFunction);

Réponse de 2017 : l' événement d'entrée fait exactement cela pour tout ce qui est plus récent que IE8.

$(el).on('input', callback)

Malheureusement, aucun événement ou ensemble d'événements ne correspond à vos critères. Les frappes au clavier et le copier / coller peuvent tous deux être gérés avec l' keyupévénement. Les modifications via JS sont plus délicates. Si vous contrôlez le code qui définit la zone de texte, le mieux est de le modifier pour appeler directement votre fonction ou déclencher un événement utilisateur sur la zone de texte:

// Compare the textbox's current and last value.  Report a change to the console.
function watchTextbox() {
  var txtInput = $('#txtInput');
  var lastValue = txtInput.data('lastValue');
  var currentValue = txtInput.val();
  if (lastValue != currentValue) {
    console.log('Value changed from ' + lastValue + ' to ' + currentValue);
    txtInput.data('lastValue', currentValue);
  }
}

// Record the initial value of the textbox.
$('#txtInput').data('lastValue', $('#txtInput').val());

// Bind to the keypress and user-defined set event.
$('#txtInput').bind('keypress set', null, watchTextbox);

// Example of JS code triggering the user event
$('#btnSetText').click(function (ev) {
  $('#txtInput').val('abc def').trigger('set');
});

Si vous n'avez aucun contrôle sur ce code, vous pouvez utiliser setInterval()pour «surveiller» la zone de texte pour les modifications:

// Check the textbox every 100 milliseconds.  This seems to be pretty responsive.
setInterval(watchTextbox, 100);

Ce type de surveillance active n'attrapera pas les mises à jour «immédiatement», mais il semble être assez rapide pour qu'il n'y ait pas de décalage perceptible. Comme l'a souligné DrLouie dans les commentaires, cette solution n'est probablement pas très évolutive si vous devez surveiller de nombreuses entrées. Vous pouvez toujours régler le 2e paramètre setInterval()pour vérifier plus ou moins fréquemment.

Voici une solution légèrement différente si vous n'avez pas aimé les autres réponses:

var field_selectors = ["#a", "#b"];
setInterval(function() { 
  $.each(field_selectors, function() { 
    var input = $(this);
    var old = input.attr("data-old-value");
    var current = input.val();
    if (old !== current) { 
      if (typeof old != 'undefined') { 
        ... your code ...
      }
      input.attr("data-old-value", current);
    }   
  }   
}, 500);

Considérez que vous ne pouvez pas vous fier aux clics et aux touches pour capturer le collage du menu contextuel.

Ajoutez ce code quelque part, cela fera l'affaire.

var originalVal = $.fn.val;
$.fn.val = function(){
    var result =originalVal.apply(this,arguments);
    if(arguments.length>0)
        $(this).change(); // OR with custom event $(this).trigger('value-changed');
    return result;
};

Trouvé cette solution à val () ne déclenche pas change () dans jQuery

J'ai créé un échantillon. Que cela fonctionne pour vous.

var typingTimer;
var doneTypingInterval = 10;
var finaldoneTypingInterval = 500;

var oldData = $("p.content").html();
$('#tyingBox').keydown(function () {
    clearTimeout(typingTimer);
    if ($('#tyingBox').val) {
        typingTimer = setTimeout(function () {
            $("p.content").html('Typing...');
        }, doneTypingInterval);
    }
});

$('#tyingBox').keyup(function () {
    clearTimeout(typingTimer);
    typingTimer = setTimeout(function () {
        $("p.content").html(oldData);
    }, finaldoneTypingInterval);
});


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<textarea id="tyingBox" tabindex="1" placeholder="Enter Message"></textarea>
<p class="content">Text will be replace here and after Stop typing it will get back</p>

http://jsfiddle.net/utbh575s/

En fait, nous n'avons pas besoin de configurer de boucles pour détecter les modifications javaScript. Nous configurons déjà de nombreux écouteurs d'événements pour l'élément que nous voulons détecter. il suffit de déclencher un événement non nocif pour faire le travail.

$("input[name='test-element']").on("propertychange change click keyup input paste blur", function(){
console.log("yeh thats worked!");
});

$("input[name='test-element']").val("test").trigger("blur");

et ofc cela n'est disponible que si vous avez le contrôle total sur les modifications javascript sur votre projet.

Eh bien, la meilleure façon est de couvrir vous-même ces trois bases que vous avez énumérées. Un simple: onblur,: onkeyup, etc. ne fonctionnera pas pour ce que vous voulez, alors combinez-les simplement.

KeyUp devrait couvrir les deux premiers, et si Javascript modifie la zone de saisie, eh bien j'espère que c'est votre propre javascript, alors ajoutez simplement un rappel dans la fonction qui le modifie.

Voici un exemple de travail que j'utilise pour implémenter une variante de saisie semi-automatique qui remplit un sélecteur jqueryui (liste), mais je ne veux pas qu'il fonctionne exactement comme la saisie semi-automatique jqueryui qui fait un menu déroulant.

$("#tagFilter").on("change keyup paste", function() {
     var filterText = $("#tagFilter").val();
    $("#tags").empty();
    $.getJSON("http://localhost/cgi-bin/tags.php?term=" + filterText,
        function(data) {
            var i;
            for (i = 0; i < data.length; i++) {
                var tag = data[i].value;
                $("#tags").append("<li class=\"tag\">" + tag + "</li>");
            }
        }); 
});

PAS DE JQUERY! (Son genre obsolète de nos jours de toute façon)

Edit: j'ai supprimé les événements HTML. N'utilisez PAS d'événements HTML ... utilisez plutôt des écouteurs d'événement Javascript.

document.querySelector("#testInput").addEventListener("input", test);

function test(e) {
 var a = document.getElementById('output');
 var b = /^[ -~]+$/;
 if (e.target.value == '' || b.test(e.target.value)) {
  a.innerText = "Text is Ascii?.. Yes";
 } else if (!b.test(e.target.value)) {
  a.innerText = "Text is Ascii?.. No";
 }
}

Try pressing Alt+NumPad2+NumPad3 in the input, it will instantly detect a change, whether you Paste, Type, or any other means, rather than waiting for you to unselect the textbox for changes to detect.

<input id="testInput">
<br>
<a id="output">Text is Ascii?.. Yes</a>

Ne pouvez-vous pas simplement utiliser l' <span contenteditable="true" spellcheck="false">élément à la place de <input type="text">?

<span>(avec contenteditable="true" spellcheck="false"comme attributs) se distingue <input>principalement par:

• Ce n'est pas un style <input>.
• Il n'a pas de valuepropriété, mais le texte est rendu comme innerTextet fait partie de son corps intérieur.
• C'est multiligne, contrairement à ce <input>que vous définissez l'attribut multiline="true".

Pour accomplir l'apparence, vous pouvez, bien sûr, le styliser en CSS, tout en écrivant la valeur que innerTextvous pouvez obtenir pour lui un événement:

Voici un violon .

Malheureusement, il y a quelque chose qui ne fonctionne pas réellement dans IE et Edge, que je ne trouve pas.

Bien que cette question ait été publiée il y a 10 ans, je pense qu'elle doit encore être améliorée. Voici donc ma solution.

$(document).on('propertychange change click keyup input paste', 'selector', function (e) {
    // Do something here
});

Le seul problème avec cette solution est qu'elle ne se déclenchera pas si la valeur change de javascript comme $('selector').val('some value'). Vous pouvez déclencher n'importe quel événement sur votre sélecteur lorsque vous modifiez la valeur à partir de javascript.

$(selector).val('some value');
// fire event
$(selector).trigger('change');

vous pouvez voir cet exemple et choisir quels sont les événements qui vous intéressent:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<title>evetns</title>
</head>
<body>
<form>
    <input class="controlevents" id="i1" type="text" /><br />
    <input class="controlevents" id="i2" type="text" /><br />
    <input class="controlevents" id="i3" type="text" /><br />
    <input class="controlevents" id="i4" type="text" /><br />
    <input class="controlevents" id="i5" type="text" /><br />
</form>
<div id="datatext"></div>
</body>
</html>
<script>
$(function(){

function testingevent(ev){
    if (ev.currentTarget.tagName=="INPUT")
        $("#datatext").append("<div>id : " + ev.currentTarget.id + ", tag: " + ev.currentTarget.tagName + ", type: "+ ev.type +"</div>");
}   

    var eventlist = ["resizeend","rowenter","dragleave","beforepaste","dragover","beforecopy","page","beforeactivate","beforeeditfocus","controlselect","blur",
                    "beforedeactivate","keydown","dragstart","scroll","propertychange","dragenter","rowsinserted","mouseup","contextmenu","beforeupdate",
                    "readystatechange","mouseenter","resize","copy","selectstart","move","dragend","rowexit","activate","focus","focusin","mouseover","cut",
                    "mousemove","focusout","filterchange","drop","blclick","rowsdelete","keypress","losecapture","deactivate","datasetchanged","dataavailable",
                    "afterupdate","mousewheel","keyup","movestart","mouseout","moveend","cellchange","layoutcomplete","help","errorupdate","mousedown","paste",
                    "mouseleave","click","drag","resizestart","datasetcomplete","beforecut","change","error","abort","load","select"];

    var inputs = $(".controlevents");

    $.each(eventlist, function(i, el){
        inputs.bind(el, testingevent);
    });

});
</script>

Je suis peut-être en retard à la fête ici, mais ne pouvez-vous pas simplement utiliser l'événement .change () fourni par jQuery.

Vous devriez pouvoir faire quelque chose comme ...

$(#CONTROLID).change(function(){
    do your stuff here ...
});

Vous pouvez toujours le lier à une liste de contrôles avec quelque chose comme ...

var flds = $("input, textarea", window.document);

flds.live('change keyup', function() {
    do your code here ...
});

Le classeur en direct garantit que tous les éléments qui existent sur la page maintenant et à l'avenir sont traités.

C'est le moyen le plus rapide et le plus propre de le faire:

J'utilise Jquery ->

$('selector').on('change', function () {
    console.log(this.id+": "+ this.value);
});

Cela fonctionne très bien pour moi.