輸入字段的值更改時會觸發什么事件？

Question

我使用的JavaScript庫有時會更改輸入字段的值。 我想檢測何時發生。

顯然，更改輸入字段的值（至少在Chrome上不更改）不會觸發“更改”和“輸入”事件。

為了驗證這一點，我已經嘗試過（使用JQuery）：

<script>
    $(function() {
       $('#inp').on('change',function() { console.log('change event'); });
       $('#inp').on('input',function() { console.log('input event'); });
       $('#inp').val('hello');
    });
</script>
<input type="text" id="inp">

當我調用.val('hello')時，更改事件和輸入事件均不會觸發。

如何檢測到更改？ （請記住，更改值的代碼不在我的控制范圍內，因此我無法在其中添加對trigger()的調用。）

Answer 1

有一種解決方法，您可以在規則的時間間隔后合並文本框的值，並在事件更改時觸發事件。

現場演示

$('#elementId').change(function(){
   alert("changed");
});

var previousVal = "";
function InputChangeListener()
{
   if($('#elementId').val() != previousVal)
   {
     previousVal  = $('#elementId').val();
     $('#elementId').change();    
   }
}

setInterval(InputChangeListener, 500);

$('#elementId').val(3);

根據許多元素的注釋進行編輯 。

您可以使用陣列和監視器，而不用擔心30個元素的性能

現場演示

$('.someclass').change(function(){
   alert("changed, id >> " + this.id);
});

var hashTablePrevElem=[];
$('.someclass').each(function(){
   hashTablePrevElem[this.id] = this.value; 
});

function InputChangeListener()
{    
    $('.someclass').each(function(){ 
      if(hashTablePrevElem[this.id] != this.value)
      {
       hashTablePrevElem[this.id]  = this.value;
       $(this).change();    
      }
    });
}