如何检测javascript事件输入的变化

How to detect changed of a input from javascript event

本文关键字：事件 输入 变化 javascript 何检测 检测      更新时间：2023-09-26

我想检测输入字段的内容何时发生更改。例如按钮的事件，我如何检测此更改?

$('#kunden_plz').on('propertychange change keyup paste input',function(){
	console.log("PLZ: "+$(this).val());
});
$('#change_plz').on('click',function(){
  $('#kunden_plz').val("12345");  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>
    <label>Plz: </label> 
	<input id="kunden_plz" class="plz" size="5" name="plz" value="" type="text"  /> 
  </li>
</ul>
<button id="change_plz" type="button">Change</button>

我希望有人有一个想法，除了这个:

<button id='btn'>Click Me</button>
<input type='hidden'id='txtVar' value=''/>
$("#btn").click(function(){
   $("#txtVar").val("1234").change();
});
$(document).on('change', '#txtVar', function () {
   alert("called");
});

当您以编程方式更改它们时将不会触发事件。然而，.trigger(event)/.triggerHandler(event)可用于触发事件。

$('#kunden_plz').on('propertychange change keyup paste input',function(){
	console.log("PLZ: "+$(this).val());
});
$('#change_plz').on('click',function(){
  $('#kunden_plz').val("12345").trigger('change');  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>
    <label>Plz: </label> 
	<input id="kunden_plz" class="plz" size="5" name="plz" value="" type="text"  /> 
  </li>
</ul>
<button id="change_plz" type="button">Change</button>

第二个选项是轮询不推荐

var previousVal;
var pollInterval = setInterval(function() {
    var val = $('#kunden_plz').val();
    if (val !== previousVal) {
      // It changed
      console.log("PLZ: "+val);
    }
    previousVal = val;
}, 100);
$('#change_plz').on('click',function(){
  $('#kunden_plz').val("12345").trigger('change');  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>
    <label>Plz: </label> 
	<input id="kunden_plz" class="plz" size="5" name="plz" value="" type="text"  /> 
  </li>
</ul>
<button id="change_plz" type="button">Change</button>

相关文章：