Événement Fire oninput avec jQuery

j'ai un événement oninput sur une textarea pour vérifier la hauteur et la redimensionner. Maintenant j'ai besoin de modifier la valeur parfois. Je le fais simplement en éditant le val() dans jQuery, mais cela ne déclenche pas l'événement oninput. Y a-t-il un moyen de déclencher l'événement oninput de façon programmatique avec jQuery?

23
demandé sur Zeeshan Adil 2012-06-25 16:11:16

6 réponses

oninput n'est pas encore à JQuery.

Vous pouvez voir les 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 n'en veulent encore.

mais non, changer val() directement ne déclencherait pas le HTML5 oninput parce que sa spécification stipule que c'est quand l'utilisateur, dans L'interface utilisateur, change la valeur de l'entrée.

Edit:

cependant quelqu'un a gentiment fait un plugin pour les personnes qui souhaitent utiliser HTML5 seulement des événements:https://github.com/dodo/jquery-inputevent

7
répondu Sammaye 2014-07-25 13:45:56

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

$("#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
répondu Fernando 2015-10-16 18:40:43

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 "oninput", donc vous devrez utiliser POJS.

Démo sur JS Fiddle.

17
répondu karim79 2015-12-10 15:50:54

Vous pouvez lier à l'entrée et à modifier:

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

modifier sera déclenché à change ()et aux affectations val (" " ), mais après quelques changements

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

après vous lier à modifier vous pouvez l'appeler à la main sur chaque val(" ") affectation:

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

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

(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
répondu ungalcrys 2014-11-19 20:12:44

Essayez avec "keypress" ou "keydown".

Exemple 1:

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

Exemple 2:

$("#textarea").keydown(function(){
    alert($("#textarea").val());
});
0
répondu CrsCaballero 2017-11-21 17:08:29

push RUN code SNIPPET for seeing results

j'ai cherché un meilleur exemple pour joindre un intervalle d'entrée à une valeur d'entrée et donc j'ai modifié L'exemple de Fernando dans un plugin JQuery ,donc : pour chaque <input type="range" min="1" max="100" value="50" id="range1"> vous aurez sa valeur: <input type="text" disabled id="value" class="range1" value="0"> il en est de même pour toute gamme de parent id="plage1" il y a un enfant id="valeur" class="plage1"

<!-- <script src="../js/jquery.js"></script> -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>


1<input type="range" min="1" max="100" value="50" id="range1"><input type="text" disabled id="value" class="range1" value="0"><br>
2<input type="range" min="1" max="100" value="50" id="range2"><input type="text" disabled id="value" class="range2" value="0"><br>
3<input type="range" min="1" max="100" value="50" id="range3"><input type="text" disabled id="value" class="range3" value="0"><br>
4<input type="range" min="1" max="100" value="50" id="range4"><input type="text" disabled id="value" class="range4" value="0"><br>
...<br>
n<input type="range" min="1" max="100" value="50" id="rangen"><input type="text" disabled id="value" class="rangen" value="0"><br>


<script type="text/javascript">
<!--
$(document).ready(function() {
  $('input').on("input",function(){
    $('input').each(function(index) {
      //console.log('1 '+index + ': ' + $(this).text()+',id='+$(this).attr('id'));
      if($(this).attr('id')=='value'){
        //console.log('2 class='+$(this).attr('class'));
        var obj=$('input#'+$(this).attr('class') );
        var hisvalue=$(this);
        //console.log('3 parent`s value='+obj.val() );
        obj.on("input",function(){
          hisvalue.val(obj.val());
        });
      }
    });
  });
  $('input').trigger("input");
});
//-->
</script>
0
répondu Constantin 2018-01-19 15:45:34