当输入字段的值发生更改时，会触发什么事件

What event is triggered when the value of an input field is changed?

本文关键字：事件 什么 字段 输入      更新时间：2023-11-28

我使用的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')时，既不触发更改事件，也不触发输入事件。

如何检测变化？（请记住，更改值的代码超出了我的控制范围，因此我无法在那里添加对trigger()的调用。）

有一个解决方案，您可以每隔一段时间池化textbox的值，并在更改时触发事件。

实时演示

$('#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();    
      }
    });
}
相关文章：