使用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);

Answer 6

嘗試使用“keypress”或“keydown”。

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