javascript - oninput - Détecter toutes les modifications apportées à<input type="text">(immédiatement) en utilisant JQuery




value change jquery (11)

La valeur d'un <input type="text"> peut varier de plusieurs façons, notamment:

  • les touches
  • copier coller
  • modifié avec JavaScript
  • auto-complété par le 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é tout de suite, pas seulement quand l'entrée perd son focus.

Je suis à la recherche de la façon la plus propre et la plus robuste de faire cela à travers tous les navigateurs (en utilisant jQuery de préférence).

Exemple de cas d'utilisation: Sur la page d' inscription de Twitter , la valeur du champ de nom d'utilisateur apparaît dans l'url " http://twitter/ username " en dessous.


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 de changement () dans jQuery


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.


Eh bien, le meilleur moyen est de couvrir ces trois bases que vous avez énumérées par vous-même. Un simple: onblur,: onkeyup, etc ne fonctionnera pas pour ce que vous voulez, alors il suffit de les combiner.

KeyUp devrait couvrir les deux premiers, et si JavaScript est en train de modifier la boîte de saisie, eh bien, j'espère que c'est votre propre javascript, alors ajoutez juste un rappel dans la fonction qui le modifie.


En fait, nous n'avons pas besoin d'installer des boucles pour détecter les changements de JavaScript. Nous avons déjà mis en place de nombreux écouteurs d'événements sur l'élément que nous voulons détecter. le simple déclenchement d'un événement non nuisible fera 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 d'ailleurs c'est seulement disponible si vous avez le plein contrôle sur les changements de javascript sur votre projet.


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 être capable de faire quelque chose comme ...

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

Vous pouvez toujours 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 dans le futur sont gérés.


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

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

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

Malheureusement, je pense que setInterval remporte le prix:

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

C'est la solution la plus propre, à 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 une input peut avoir une valeur.

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

  • La latence de 100ms? Pour de nombreuses applications, 100ms est assez rapide.
  • Ajout de la charge sur le navigateur? En général, l'ajout de beaucoup de setIntervals lourds sur votre page est mauvais. Mais dans ce cas particulier, le chargement de la page ajoutée est indétectable.
  • Cela ne correspond 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.

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

<span> (avec contenteditable="true" spellcheck="false" comme attributs) distinct par <input> principalement parce que:

  • Ce n'est pas comme un <input> .
  • Il n'a pas de propriété value , mais le texte est rendu innerText et fait partie de son corps interne.
  • C'est multiligne alors que <input> ne l'est pas bien que vous définissiez l'attribut multiline="true" .

Pour réaliser l'apparence, vous pouvez, bien sûr, le innerText en CSS, alors qu'en écrivant la valeur comme innerText vous pouvez obtenir un événement:

Voici un fiddle .

Malheureusement, il y a quelque chose qui ne fonctionne pas dans IE et Edge, que je suis incapable de trouver.


Voici un exemple de travail que j'utilise pour implémenter une variation de saisie semi-automatique. Il 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>");
            }
        }); 
});

Voici une solution légèrement différente si vous n'avez pas envie des 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 compter sur le clic et le clavier pour capturer le contenu du menu contextuel.


Réponse 2017 : l' événement d'entrée fait exactement cela pour quelque chose de plus récent que IE8.

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




html