Sự kiện oninput lửa với jQuery

Question

Tôi có một sự kiện oninput trên một vùng văn bản để kiểm tra chiều cao và thay đổi kích thước nó. Bây giờ tôi cần phải chỉnh sửa giá trị đôi khi. Tôi làm điều này chỉ bằng cách chỉnh sửa val() trong jQuery, nhưng điều đó không kích hoạt sự kiện oninput. Có cách nào để kích hoạt sự kiện oninput programatically với jQuery?

Answer 1

đầu vào chưa thực sự trong JQuery.

Bạn có thể xem bài viết về nó ở đây:

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

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

Về cơ bản sự đồng thuận chung là họ không muốn nó được nêu ra.

Nhưng không, việc thay đổi val() trực tiếp sẽ không kích hoạt đầu vào html5 vì đặc điểm kỹ thuật của nó cho biết khi người dùng, trong giao diện người dùng, thay đổi giá trị của đầu vào.

Edit:

Tuy nhiên một số ai có vui lòng thực hiện một plugin cho những người muốn sử dụng HTML5 chỉ sự kiện: https://github.com/dodo/jquery-inputevent

Answer 2

Bạn chỉ có thể gọi nó, ví dụ .:

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

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

... nhưng như @Sammaye chỉ ra, jQuery không có rõ ràng "oninput" xử lý, vì vậy bạn sẽ phải sử dụng POJS.

Demo on JS Fiddle.

Answer 3

Bạn có thể liên kết với đầu vào và thay đổi:

đầu vào sẽ được kích hoạt tại đầu vào của người dùng

thay đổi sẽ được kích hoạt khi thay đổi() và t o val (" ") bài tập, nhưng sau khi một số thay đổi

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

sau khi bạn binded đến thay đổi bạn có thể gọi nó là manualy trên mỗi val ("") công việc:

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

hoặc bạn có thể ghi đè lên jQuery val (" ") phương pháp để kích hoạt thay đổi trên mỗi val dùng ("") gọi:

(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

Nó hơi trễ một chút, nhưng để tham khảo trong tương lai, có phương pháp .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

Hãy thử với "bấm phím" hoặc "KeyDown".

Ví dụ 1:

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

Ví dụ 2:

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

Answer 6

đẩy RUN ĐOẠN MÃ cho thấy kết quả

tôi đã được tìm kiếm một ví dụ tốt hơn để tham gia vào một loạt các đầu vào với giá trị đầu vào và do đó, tôi đã sửa đổi ví dụ của Fernando trong một plugin JQuery, vì vậy: cho mỗi <input type="range" min="1" max="100" value="50" id="range1"> bạn sẽ có giá trị của mình: <input type="text" disabled id="value" class="range1" value="0"> như vậy là như thế nào cho bất kỳ phạm vi mẹ id = "RANGE1" có một id con = "giá trị" 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>