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的答案...

当覆盖ModelForm函数时...除了比较ID外，您还可以添加一个偶数触发量！如果未提供，则“常规” .val()函数没有任何变化。如果提供，它将触发事件。

您将必须更改以编程方式更改值的每个位置，但必须采用更实际的方式。 ;）

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

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

3 个答案: