Javascript 使用 jQuery 触发 oninput 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11189136/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fire oninput event with jQuery
提问by Deep Frozen
I have an oninput event on a textarea to check the height and resize it. Now I need to edit the value sometimes. I do this just by editting the val() in jQuery, but that does not trigger the oninput event. Is there any way to trigger the oninput event programatically with jQuery?
我在 textarea 上有一个 oninput 事件来检查高度并调整它的大小。现在我有时需要编辑该值。我只是通过在 jQuery 中编辑 val() 来做到这一点，但这不会触发 oninput 事件。有没有办法用jQuery以编程方式触发oninput事件？
采纳答案by Paul Chris Jones
Use .on('input'). For example:
使用.on('input'). 例如：
$('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>回答by Fernando
It is a bit too late, but for future reference, there is the .trigger method.
现在有点晚了，但为了将来参考，有 .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>回答by karim79
You can simply invoke it, e.g.:
您可以简单地调用它，例如：
$("input")[0].oninput = function () {
alert("hello");
};
$("input")[0].oninput();
...but as @Sammaye points out, jQuery has no explicit "oninput" handler, so you'll have to use POJS.
...但正如@Sammaye 指出的那样，jQuery 没有明确的“oninput”处理程序，因此您必须使用 POJS。
回答by Sammaye
oninput is not actually in JQuery yet.
oninput 实际上还没有出现在 JQuery 中。
You can see posts about it here:
你可以在这里看到关于它的帖子：
http://forum.jquery.com/topic/html5-oninput-event
http://forum.jquery.com/topic/html5-oninput-event
http://bugs.jquery.com/ticket/9121
http://bugs.jquery.com/ticket/9121
Basically the general consensus is that they don't want it yet.
基本上普遍的共识是他们还不想要它。
But no, changing val() directly would not trigger the html5 oninput because it's specification states it is when the user, in the UI, changes the value of the input.
但是不，直接更改 val() 不会触发 html5 oninput，因为它的规范说明用户在 UI 中更改输入的值时。
Edit:
编辑：
However some one has kindly made a plugin for people who wish to use HTML5 only events: https://github.com/dodo/jquery-inputevent
然而，有人为希望仅使用 HTML5 事件的人制作了一个插件：https: //github.com/dodo/jquery-inputevent
回答by ungalcrys
You can bind to input and change:
您可以绑定到输入并更改：
inputwill be triggered at user input
输入将在用户输入时触发
changewill be triggered at change() and to val(" ") assignments, but after some changes
更改将在 change()和 val(" ") 分配时触发，但经过一些更改
$("#textarea").bind("input change", function() {
alert("change happend");
});
...
after you binded to changeyou can call it manualy on each val(" ") assignment:
绑定更改后，您可以在每个 val(" ") 分配中手动调用它：
$("#textarea").val("text").change();
or you can overwrite jQuery val(" ") method to trigger changeon each user val(" ") call:
或者您可以覆盖 jQuery val(" ") 方法来触发每个用户 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);
回答by CrsCaballero
Try with "keypress" or "keydown".
尝试使用“keypress”或“keydown”。
Example 1:
示例 1：
$("#textarea").keypress(function(){
alert($("#textarea").val());
});
Example 2:
示例 2：
$("#textarea").keydown(function(){
alert($("#textarea").val());
});
回答by Constantin
push RUN CODE SNIPPET for seeing results
按下 RUN CODE SNIPPET 查看结果
i've been searching for a better example to join an input range to an input value and soi modified Fernando's example in a JQuery plugin,so :
for every
<input type="range" min="1" max="100" value="50" id="range1">you'll have his value:
<input type="text" disabled id="value" class="range1" value="0">so is like for any parent range id="range1"there is a child id="value" class="range1"
我一直在寻找一个更好的例子来将输入范围连接到输入值，所以我在 JQuery 插件中修改了费尔南多的例子，所以：对于每个
<input type="range" min="1" max="100" value="50" id="range1">你都会有他的价值：
<input type="text" disabled id="value" class="range1" value="0">所以就像任何父范围id=" range1"有一个孩子 id="value" class="range1"
<!-- <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>