用jQuery觸發輸入事件

Question

我在textarea上有一個oninput事件來檢查高度並調整它的大小。現在我需要編輯值有時。我只是通過編輯jQuery中的val（）來做到這一點，但是這不會觸發oninput事件。有沒有辦法用jQuery以編程方式觸發oninput事件？

Answer 1

oninput實際上不是JQuery的呢。

你可以在這裏看到關於它的帖子：

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

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

基本上普遍的共識是，他們不希望它。

不過沒有關係，改變VAL（）oninput因爲它的規範規定它是當用戶在UI，改變輸入的值直接就不會觸發HTML5。

編輯：

然而有人慷慨作出了插件誰希望使用HTML5只是事件的人：https://github.com/dodo/jquery-inputevent

Answer 2

你可以簡單地調用它，例如：

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

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

...但@Sammaye指出，jQuery有沒有明確的「oninput」處理程序，所以你必須使用POJS。

Demo on JS Fiddle。

Answer 3

您可以綁定到輸入和變化：

輸入會在用戶輸入時觸發

更改將在更改時觸發（）和t ØVAL（ 「 」）的任務，但經過一些修改

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

您綁定到變化後可以manualy叫它每個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 4

這有點太晚了，但爲了將來的參考，還有.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 5

與 「按鍵」 或 「的keydown」 嘗試。

實施例1：

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

實施例2：

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

Answer 6

RUN推代碼段看到結果

我一直在尋找更好的實例加入的輸入範圍到輸入值等 我修改了費爾南多的例子在JQuery插件，所以： 爲每 <input type="range" min="1" max="100" value="50" id="range1"> 你就會有他的價值： <input type="text" disabled id="value" class="range1" value="0"> 所以就像任何父範圍ID = 「範圍1」家中有小孩的id = 「值」 類= 「範圍1」

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