使用jQuery触发oninput事件

Question

我在文本域上使用了oninput事件来检查高度并进行调整。现在有时需要编辑值。我只是通过jQuery中的val()方法进行编辑，但这不会触发oninput事件。有没有办法用jQuery编程触发oninput事件？

- Deep Frozen

---

未来的访客请注意：简单的.on('input')可以解决问题。 - hauzer

@hauzer 你说得完全正确。这里有一个演示可以证明它。在Chrome、FF和Opera上测试过（我猜现代IE版本也不会有问题）。 - yuvi

或者只需使用简单的JS：element.dispatchEvent(new Event('input'));（IE9+） - Nux

Answer 1

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

- Paul Chris Jones

---

我选择接受这个答案，而不是之前被接受的答案，因为现在这个答案才是正确的。它现在被支持并且功能良好。 - Deep Frozen

@paul_jones 谢谢，伙计。我一直在考虑这个问题。在 HTML 页面上，我们可以使用 <input onInput="console.log('working')">。 - ThataL

我对这个答案感到困惑，因为它似乎是在“处理”输入事件，而不是“触发”它。@DeepFrozen，你为什么接受了这个答案？ - Matthijs Kooijman

Answer 2

虽然有点晚了，但作为参考，这里有个.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>

- Fernando

Answer 3

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

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

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

...但正如 @Sammaye 指出的那样，jQuery没有明确的"oninput"处理程序，所以你将不得不使用POJS。

在JS Fiddle上演示。

- karim79

Answer 4

目前 JQuery 中还没有 oninput 方法。

可以在以下链接中浏览相关帖子：

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

- Sammaye

---

Andy的项目链接已经失效了。在Github上有一个正在积极开发的分支[https://github.com/dodo/jquery-inputevent]。 - Joe Taylor

@JoeTaylor，您可以编辑答案，使用新链接更新死链。顺便说一下，我已经这样做了。 - Denilson Sá Maia

或许在问题被提出时这是正确的。但自从jQuery 1.0以来，就有了trigger方法。 - Fernando

Answer 5

您可以绑定输入和更改事件：

input 事件将在用户输入时触发。

change 事件将在 change() 和 val(" ") 赋值之后的某些更改后触发。

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

在绑定到 change 之后，您可以在每个 val(" ") 分配上手动调用它:

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

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

(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);

- ungalcrys

Answer 6

尝试使用“keypress”或“keydown”。

示例1：

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

例子2：

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

- CrsCaballero

Answer 7

点击“运行代码片段”查看结果

我一直在寻找一个更好的示例来将输入范围与输入值连接起来，因此 我修改了 Fernando 的 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>

- user5781320