使用jQuery触发oninput事件

Question

我在textarea上有一个oninput事件来检查高度并调整它的大小.现在我需要有时编辑值.我只是通过编辑jQuery中的val()来做到这一点,但这不会触发oninput事件.有没有办法用jQuery以编程方式触发oninput事件？

Answer 1

这有点太晚了,但为了将来参考,有.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>

Answer 2

使用.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>

Answer 3

你可以简单地调用它,例如:

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

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

...但正如@Sammaye指出的那样,jQuery没有明确的"oninput"处理程序,所以你必须使用POJS.

JS Fiddle上的演示.

Answer 4

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

Answer 5

您可以绑定到输入和更改:

输入将在用户输入时触发

更改将在change()和val("")赋值时触发,但在进行一些更改后

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

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

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

或者你可以覆盖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);