关于javascript：使用jQuery触发oninput事件


Fire oninput event with jQuery

我在textarea上有一个oninput事件，以检查高度并调整其大小。 现在，我有时需要编辑值。 我只是通过在jQuery中编辑val()来做到这一点，但这不会触发oninput事件。 有什么方法可以通过jQuery编程触发oninput事件吗？

相关讨论

为时已晚，但是有一个.trigger方法供以后参考。

1
2
3
4
5
6
$("#testArea").on("input", function(e) {
  $("#outputArea").text( $(e.target).val() )
});

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

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

使用.on('input')。例如：

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

相关讨论

您可以简单地调用它，例如：

1
2
3
4
5
$("input")[0].oninput = function () {
   alert("hello");
};

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

...但是正如@Sammaye指出的那样，jQuery没有显式的" oninput"处理程序，因此您必须使用POJS。

JS Fiddle上的演示。

oninput实际上尚未在JQuery中。

您可以在此处查看有关它的帖子：

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

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

基本上，普遍的共识是他们还不想要它。

但是不，直接更改val()不会触发html5 oninput，因为它的规范指出它是用户在UI中更改输入值的时间。

编辑：

但是，有人为希望使用仅HTML5事件的人们制作了一个插件：https://github.com/dodo/jquery-inputevent

相关讨论

您可以绑定到输入并更改：

输入将在用户输入时触发

更改将在change()和val("")分配时触发，但是经过一些更改

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

绑定更改后，可以在每个val("")分配上手动调用它：

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

或者您可以覆盖jQuery val("")方法来触发每个用户val("")调用的更改：

1
2
3
4
5
6
7
8
9
10
(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);

按下RUN CODE SNIPPET以查看结果

我一直在寻找一个更好的例子，以将输入范围连接到输入值，所以
我在一个JQuery插件中修改了Fernando的示例，所以：
每一个

您将拥有他的价值：

因此，就像任何父范围id =" range1"一样，有一个孩子id =" value" class =" range1"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!-- <script src="../js/jquery.js"> -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js">


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


<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");
});
//-->

尝试使用" keypress"或" keydown"。

范例1：

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

范例2：

1
2
3
$("#textarea").keydown(function(){
    alert($("#textarea").val());
});