javascript - 输入字段的值更改时会触发什么事件？

Question

我正在使用一个偶尔会更改输入字段值的 JavaScript 库。我想检测这种情况何时发生。

显然，change 和 input 事件不会在输入字段的值更改时触发(至少在 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') 时，change 事件和 input 事件都没有被触发。

我如何检测变化？ (请记住，更改值的代码不在我的控制范围内，因此我无法在此处添加对 trigger() 的调用。)

Answer 1

有一个变通办法，您可以在定期间隔后汇集文本框的值，并在更改时触发事件。

Live Demo

$('#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 个元素不会成为性能问题

Live Demo

$('.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();    
      }
    });
}