jQuery 可以检查输入的内容是否发生了变化？

Question

是否有可能以某种方式将 javascript（jQuery 是最好的）事件绑定到“更改”表单输入值？

我知道.change()方法，但它不会触发，直到您（光标）离开输入字段。 我也考虑过使用.keyup()方法，但它也会对箭头键等做出反应。

每次输入中的文本发生变化时，我只需要触发一个动作，即使只是一个字母的变化。

Answer 1

有一个简单的解决方案，那就是 HTML5 input事件。 所有主要浏览器的当前版本都支持<input type="text">元素，并且对于 IE < 9 有一个简单的解决方法。有关更多详细信息，请参阅以下答案：

• jQuery 键盘事件
• 只捕捉改变输入的按键？

示例（IE < 9 除外：有关解决方法，请参见上面的链接）：

$("#your_id").on("input", function() {
    alert("Change to " + this.value);
});

Answer 2

是的，将其与更改之前的值进行比较。

var previousValue = $("#elm").val();
$("#elm").keyup(function(e) {
    var currentValue = $(this).val();
    if(currentValue != previousValue) {
         previousValue = currentValue;
         alert("Value changed!");
    }
});

另一种选择是仅在某些键上触发更改的功能。 使用e.KeyCode找出按下了什么键。

Answer 3

您还可以将初始值存储在数据属性中，并根据当前值进行检查。

<input type="text" name="somename" id="id_someid" value="" data-initial="your initial value" /> 

$("#id_someid").keyup(function() {
    return $(this).val() == $(this).data().initial;
});

如果初始值未更改，则返回 true。

Answer 4

function checkChange($this){
    var value = $this.val();      
    var sv=$this.data("stored");            
        if(value!=sv)
            $this.trigger("simpleChange");    
}

$(document).ready(function(){
    $(this).data("stored",$(this).val());   
        $("input").bind("keyup",function(e){  
        checkChange($(this));
    });        
    $("input").bind("simpleChange",function(e){
        alert("the value is chaneged");
    });        
});

这是小提琴http://jsfiddle.net/Q9PqT/1/

Answer 5

您可以在 jQuery 中使用数据并捕获所有事件，然后根据它的最后一个值（未经测试）对其进行测试：

$(document).ready(function() {  
    $("#fieldId").bind("keyup keydown keypress change blur", function() {
        if ($(this).val() != jQuery.data(this, "lastvalue") {
         alert("changed");
        }
        jQuery.data(this, "lastvalue", $(this).val());
    });
});

这对于一长串项目也很有效。 使用jQuery.data意味着您不必创建 javascript 变量来跟踪值。 您可以执行$("#fieldId1, #fieldId2, #fieldId3, #fieldId14, etc")来跟踪许多字段。

更新：在bind列表中添加了blur 。

Answer 6

您可以在键和鼠标事件的组合上设置事件，当然也可以设置 onblur。 在这种情况下，存储输入的值。 在下一次调用中，将当前值与最后存储的值进行比较。 只有在它确实发生变化时才施展魔法。

要以或多或少干净的方式执行此操作：

您可以将数据与 DOM 元素（查找 api.jquery.com/jQuery.data ）相关联，因此您可以编写一组通用的事件处理程序，这些处理程序分配给表单中的所有元素。 每个事件都可以将触发它的元素传递给一个通用函数。 该函数可以将旧值添加到元素的数据中。 这样，您应该能够将其实现为适用于整个表单以及您从现在开始编写的每个表单的通用代码。 :) 而且我猜大概不会超过 20 行代码。

这个小提琴中有一个例子： http : //jsfiddle.net/zeEwX/

Answer 7

我不得不将这种代码用于将东西粘贴到现场的扫描仪

$(document).ready(function() {
  var tId,oldVal;
  $("#fieldId").focus(function() {
     oldVal = $("#fieldId").val();
     tId=setInterval(function() { 
      var newVal = $("#fieldId").val(); 
      if (oldVal!=newVal) oldVal=newVal;
      someaction() },100);
  });
  $("#fieldId").blur(function(){ clearInterval(tId)});
});

未测试...

Answer 8

我认为没有“简单”的解决方案。 您可能需要同时使用 onKeyUp 和 onChange 事件，以便在使用鼠标进行更改时也能捕捉到。 每次调用您的代码时，您都可以将您“看到”的值存储在附加到该字段的 this.seenValue 上。 这应该会更容易一些。

Answer 9

由于用户可以进入操作系统菜单并使用鼠标选择粘贴，因此没有安全事件会为您触发此操作。 我发现始终有效的唯一方法是使用 setInterval 来检查输入值是否已更改：

var inp = $('#input'),
    val = saved = inp.val(),
    tid = setInterval(function() {
        val = inp.val();
        if ( saved != val ) {
            console.log('#input has changed');
            saved = val;
    },50);

您还可以使用 jQuery 特殊事件进行设置。