如何检测输入的值何时使用 JS/Jquery 动态变化

Question

我能够检测输入在键入、粘贴等时是否更改了值，但如果值从另一个脚本动态更改，我无法检测到它：

假设我有一个输入

<input id="testInput" value="Type Here" />

如果值通过键入而改变，我想提醒“已更改”

$('#testInput').on('input', function(){
    alert("changed");
});

这可行，但如果值从另一个脚本动态更改，我无法触发警报：

$('#testInput').val("Dynamic Value"); //This doesn't show the alert

我希望能够通过键入、粘贴或从脚本或操作动态检测值是否发生了变化。

.val() 正在许多不同的地方执行，因此无法将整个代码中的.val() 更改为.val().trigger("change") 之类的其他内容。

这是一个带有更好示例的 jsfiddle：

https://jsfiddle.net/xpvt214o/486146/

Answer 1

另一种方法是覆盖函数$.fn.val()

这是开始的基本方法。

var $val = $.fn.val;
$.fn.val = function(newVal) {
  if (this.attr('id') === 'target') this.trigger('input');
  $val.call(this, newVal);
}

$('#target').on('input', function() {
  alert("changed");
});

$('#target').val('Ele from Stack');
$('#target2').val('Ele from Stack2');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id='target' />
<input id='target2' />

Answer 2

只需触发事件！

$('#testInput').val("Dynamic Value").trigger("input");

Answer 3

受Ele 的回答启发...

在覆盖.val() 函数时...您可以添加一个用于触发偶数的agrument，而不是比较id！如果未提供，则“常规”.val() 函数没有任何变化。如果提供，它会触发事件。

无论如何，您都必须更改以编程方式更改值的每个位置，但要以更实用的方式进行。 ;)

var $val = $.fn.val;
$.fn.val = function(newVal,eventToTrigger) {
  if (eventToTrigger != null) this.trigger(eventToTrigger);
  $val.call(this, newVal);
}

$('.someClass').on('input', function() {
  alert("Programmatically inputted!");
});

$('.otherClass').on('change', function() {
  alert("Programmatically changed!");
});

$('.someClass').val('Hello you!','input');
$('.otherClass').val('Doing fine?','change');
$('#whatever').val('Hehehe.');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" class="someClass">
<input type="text" class="otherClass">
<input type="text" id="whatever">