web-dev-qa-db-fra.com

Tirer un événement d'entrée avec jQuery

J'ai un événement oninput sur une zone de texte pour vérifier la hauteur et la redimensionner. Maintenant, je dois parfois modifier la valeur. Je le fais simplement en modifiant val () dans jQuery, mais cela ne déclenche pas l'événement oninput. Existe-t-il un moyen de déclencher l'événement oninput par programme avec jQuery?

javascriptjqueryhtml5events
25
Deep Frozen

Utilisez .on('input'). Par exemple: 

$('textarea').on('input', function() {
  text = $('textarea').val();
  $('div').html(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea placeholder="Type something here"></textarea>
<div></div>

9
Paul Jones

C'est un peu trop tard, mais pour référence future, il y a la méthode .trigger.

$("#testArea").on("input", function(e) {
  $("#outputArea").text( $(e.target).val() )
});

$("#testArea").val("This is a test");
$("#testArea").trigger("input");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<input id="testArea" type="text" />
<div id="outputArea"></div>

28
Fernando

Vous pouvez simplement l'invoquer, par exemple:

$("input")[0].oninput = function () {
   alert("hello"); 
};

$("input")[0].oninput();

... mais comme @Sammaye le souligne, jQuery n'a pas de gestionnaire explicite "en entrée", vous devrez donc utiliser POJS.

Démo sur JS Fiddle .

17
karim79

oninput n'est pas encore dans JQuery.

Vous pouvez voir des articles à ce sujet ici:

http://forum.jquery.com/topic/html5-oninput-event

http://bugs.jquery.com/ticket/9121

Fondamentalement, le consensus général est qu’ils ne le veulent pas encore.

Mais non, changer directement val () ne déclencherait pas l'entrée html5 car sa spécification indique que l'utilisateur, dans l'interface utilisateur, change la valeur de l'entrée.

Modifier:

Cependant, certains ont gentiment fait un plugin pour ceux qui souhaitent utiliser uniquement des événements HTML5: https://github.com/dodo/jquery-inputevent

7
Sammaye

Vous pouvez vous lier à une entrée et changer:

input sera déclenché à l'entrée de l'utilisateur

change sera déclenché lors des affectations change () et val (""), mais après quelques modifications 

$("#textarea").bind("input change", function() {
    alert("change happend");
});
...

après que vous ayez lié à change vous pouvez l’appeler manuellement à chaque affectation val (""):

$("#textarea").val("text").change();

ou vous pouvez écraser la méthode jQuery val ("") pour déclencher changer sur chaque appel utilisateur val (""):

(function ($) { var fnVal = $.fn.val;
    $.fn.val = function(value) {
        if (typeof value == 'undefined') {
            return fnVal.call(this);
        }
        var result = fnVal.call(this, value);
        $.fn.change.call(this); // calls change()
        return result;
    };
})(jQuery);
5
ungalcrys

Essayez avec "keypress" ou "keydown".

Exemple 1:

$("#textarea").keypress(function(){
    alert($("#textarea").val());
});

Exemple 2:

$("#textarea").keydown(function(){
    alert($("#textarea").val());
});
0
CrsCaballero