L'événement de saisie ne fonctionne pas si la valeur est modifiée avec jQuery val() ou JavaScript

Question

Si je modifie la valeur d'un champ de saisie de manière programmatique, la input y change Les événements ne se déclenchent pas. Par exemple, j'ai ce scénario :

var $input = $('#myinput');

$input.on('input', function() {
  // Do this when value changes
  alert($input.val());
});

$('#change').click(function() {
  // Change the value
  $input.val($input.val() + 'x');
});

<input id="myinput" type="text" />
<button id="change">Change value</button>

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

Le problème : L'événement est déclenché lorsque je tape dans le champ de texte, mais pas lorsque j'appuie sur le bouton. Existe-t-il un moyen d'y parvenir à l'aide d'un événement ou d'une autre méthode sans avoir à le faire manuellement ?

Ce que je ne veux pas faire : Je pourrais passer par tout mon code pour ajouter un trigger ou appeler la fonction partout manuellement, mais ce n'est pas ce que je recherche.

Pourquoi ? La raison principale pour laquelle je voudrais faire cela automatiquement est que j'ai beaucoup de champs de saisie et beaucoup d'endroits différents où je modifie ces entrées de manière programmatique. Je gagnerais beaucoup de temps s'il existait un moyen de déclencher l'évènement automatiquement quand une entrée est modifiée n'importe où dans mon code.

Answer 1

Une solution simple :

Déclencheur input après avoir appelé val() :

$input.trigger("input");

var $input = $("#myinput");

$input.on('input', function() {
  alert($(this).val());
});

$('#change').click(function() {
  // Change the value and trigger input
  $input.val($input.val() + 'x').trigger("input");
});

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

<input id="myinput" type="text" />
<button id="change">Change value</button>

Solution spécifique :

Comme mentionné, vous ne voulez pas déclencher input manuellement. Cette solution déclenche l'événement automatiquement en surchargeant la fonction val() .

Ajoutez simplement ceci à votre code :

(function ($) {
    var originalVal = $.fn.val;
    $.fn.val = function (value) {
        var res = originalVal.apply(this, arguments);

        if (this.is('input:text') && arguments.length >= 1) {
            // this is input type=text setter
            this.trigger("input");
        }

        return res;
    };
})(jQuery);

Ver Démonstration de JSFiddle

PS

Avis this.is('input:text') dans l'état. Si vous voulez déclencher l'événement pour d'autres types, ajoutez-les à la condition.

Answer 2

Il existe quelques moyens d'y parvenir. Ici, vous pouvez utiliser le code HTML de levelup oninput() qui se produit immédiatement lorsqu'un élément est modifié et appelez la fonction.

<input id="myinput" type="text" oninput="sample_func()" />
<button id="change">Change value</button>

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

.

var input = $("#myinput");

function sample_func(){
  alert(input.val());
}

$('#change').click(function() {
  input.val(input.val() + 'x');
});

---

Ou ce jQuery, input (juste en rapport avec l'exemple ci-dessus).

<input id="myinput" type="text" />
<button id="change">Change value</button>

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

.

var input = $("#myinput");

input.on("input", function() {
  alert(input.val());
});

$('#change').click(function() {
  input.val(input.val() + 'x');
});

---

Vous pouvez également utiliser le javascript setInterval() qui fonctionne en permanence avec un intervalle de temps donné. C'est seulement optionnel et c'est mieux si vous faites un programme lié au temps.

<input id="myinput" type="text" />
<button id="change">Change value</button>

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

.

var input = $("#myinput");

setInterval(function() { ObserveInputValue(input.val()); }, 100);

$('#change').click(function() {
  input.val(input.val() + 'x');
});

Answer 3

On dirait qu'il n'y a pas d'autre moyen que d'utiliser .trigger() .

Essayons la même chose en utilisant .change() événement :

var $input = $("#myinput");

$input.on('change paste keyup', function() {
  alert($(this).val());
});

$('#change').click(function() {
  $input.val($input.val() + 'x').trigger("change");
});

<input id="myinput" type="text" />
<button id="change">Change value</button>

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

Ou vous devez le déclencher manuellement :

$('#change').click(function() {
  $input.val($input.val() + 'x').trigger("input");
});

Snippet

var $input = $("#myinput");

$input.on('input', function() {
  alert($(this).val());
});

$('#change').click(function() {
  $input.val($input.val() + 'x').trigger("input");
});

<input id="myinput" type="text" />
<button id="change">Change value</button>

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

Answer 4

Les écouteurs jQuery ne fonctionnent que sur les événements réels du navigateur et ceux-ci ne sont pas lancés lorsque vous modifiez quelque chose par programme.

Vous pourriez créer votre propre extension jQuery miniature pour le proxy de sorte que vous déclenchiez toujours l'événement mais que vous n'ayez à le faire qu'à un seul endroit modulaire, comme ceci :

$.fn.changeTextField = function (value) {
  return $(this).val(value).trigger("change");
}

Ensuite, il suffit d'appeler votre nouvelle fonction chaque fois que vous voulez mettre à jour votre champ de texte, au lieu d'utiliser la fonction "val" de jQuery :

$("#myInput").changeTextField("foo");

Voici une version fonctionnant avec une fonction proxy :

    <!DOCTYPE html>
    <html>
        <head>
            <title>Test stuff</title>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
        </head>
        <body>

  <input id="myInput" type="text" />
        <button id="myButton">Change value</button>

        <script type="text/javascript">
            $.fn.changeTextField = function (value) {
             return $(this).val(value).trigger("change");
            }

            $( document ).ready(function() {
                var $input = $("#myInput");

                $input.on("change", function() {
                    alert($input.val());
                });

                $('#myButton').click(function() {
                    $("#myInput").changeTextField("foo");
                });
            });
        </script>
        </body>
    </html>

Pour mémoire, la réponse à cette question a déjà été donnée ici : Pourquoi l'événement de changement jquery ne se déclenche-t-il pas lorsque je définis la valeur d'une sélection à l'aide de val() ?

et ici : JQuery détectant un événement de changement programmatique

Answer 5

$input.val($input.val() + 'x')
$input.trigger('change');

L'événement de changement ne se déclenche que lorsque l'entrée est floue.