É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?
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
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>
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.
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);
Essayez avec "keypress" ou "keydown".
Exemple 1:
$("#textarea").keypress(function(){
alert($("#textarea").val());
});
Exemple 2:
$("#textarea").keydown(function(){
alert($("#textarea").val());
});
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>