使用jQuery触发oninput事件

Question

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

Answer 1

有点太晚了，但为了将来参考，有.trigger方法。

＆＃13;

＆＃13;

$("#testArea").on("input", function(e) {
  $("#outputArea").text( $(e.target).val() )
});

$("#testArea").val("This is a test");
$("#testArea").trigger("input");

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

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

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

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

Demo on JS Fiddle

Answer 3

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

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

用户输入

将触发

输入

更改将在更改（）和val（＆＃34;＆＃34;）分配时触发，但在进行一些更改后

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

绑定到更改后，您可以在每个val（＆＃34;＆＃34;）分配上手动调用它：

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

或者您可以覆盖jQuery val（＆＃34;＆＃34;）方法以在每个用户val（＆＃34;＆＃34;）调用上触发更改：

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

Answer 6

尝试使用＆＃34;按键＆＃34;或＆＃34; keydown＆＃34;。

示例1：

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

示例2：

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

Answer 7

按RUN CODE SNIPPET查看结果

我一直在寻找一个更好的例子来将输入范围加入输入值，所以 我在JQuery插件中修改了Fernando的例子，所以： 为每一个 的 <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>