代码之家  ›  专栏  ›  技术社区  ›  Eduardo Ponce de Leon

如何检测JS/JQuery动态更改输入值的时间

  •  0
  • Eduardo Ponce de Leon  · 技术社区  · 7 年前

    我可以检测输入在键入、粘贴等过程中是否更改了值,但如果该值与另一个脚本动态更改,则无法检测到:

    假设我有一个输入

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

    如果输入的值改变了,我想提醒你“改变了”

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

    这是可行的,但如果该值与另一个脚本动态更改,则无法触发警报:

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

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

    .val() Beeing在很多不同的地方执行,所以改变了 Val.() 在代码中查找其他类似的内容 .val().trigger("change") 不是一个选项。

    下面是一个更好的例子:

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

    3 回复  |  直到 7 年前
        1
  •  1
  •   Ele    7 年前

    另一种方法是重写函数 $.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' />
        2
  •  1
  •   Louys Patrice Bessette    7 年前

    触发事件!

    $('#testInput').val("Dynamic Value").trigger("input");
    
        3
  •  1
  •   Louys Patrice Bessette    7 年前

    渴望 Ele 答案是…

    当覆盖 .val() 功能…您可以为偶数添加一个参数来触发,而不是比较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">