Question

在jQuery中，如果textbox的值从其他事件动态变化，我如何跟踪onchange事件。我尝试了这个，但它不起作用：

$("#txtbox").change(function(){
   alert("change");
});

Answer 1

keyup并未涵盖所有自然案例:(

change和keyup不起作用的两种情况：

浏览器表单自动填充机制
从系统剪贴板执行鼠标粘贴。

示例：表单包含用于将电子邮件地址放入其中的文本框，并且onchange上附加了keyup事件。

当用户开始输入电子邮件地址时，例如，弹出Chrome或Firefox自动完成框，用户点击其中一个选项，框中填充值，焦点保留在文本框内（因此没有更改事件触发）并且没有按下任何键（没有键入事件）。我尝试将click附加到列表中，但它会在我的浏览器中引起奇怪的行为。

与粘贴类似 - 如果使用鼠标进行粘贴（通过右键单击可用的上下文菜单），则不会触发keyup和change事件。

任何人都有完整的解决方案，即如何处理输入值的实际变化？

Answer 2

我一直在寻找这样的解决方案，它会触发而不需要用户离开元素，但这适用于所有情况，包括Jakub在他的帖子中发现的情况。即。

正常输入
通过鼠标粘贴
自动填充

我也非常想要一个jQuery解决方案，因为我使用了各种jQuery选择器等，并且不希望“解开”我的jQuery对象到DOM元素的麻烦。

我使用3个不同的事件触发器寻求解决方案 - 请参阅下面的代码示例中的注释：

var valuechanged = function () {
    // do something
};
var inputtowatch = $('.selector');
inputtowatch.on('input', valuechanged);
inputtowatch.on('keyup', valuechanged); // input event is buggy and doesn't catch delete/backspace in IE, but can't just use keyup alone as that doesn't catch paste and automcomplete
inputtowatch.on('propertychange', valuechanged); // input event not supported in IE < 9

我预计使用这样的多个事件可能会导致函数被多次触发。在我在Firebug中的测试中，这没有发生。但是，如果函数运行的次数太多，我没有意识到这一点是幸运的，因此没有进一步测试这个特定的方面（例如其他浏览器）。

Answer 3

我同意Jakub P.

我尝试使用Jquery来处理文件输入类型文件的更改（以预览上传的图像），但它不会像普通的旧javascript onchange事件那样触发。

我更改了$(document).ready()

中附加事件处理程序的方式

从：

$("#iconImage").bind("change", function(event) {
    ChangeImage("iconImage", "iconImagePreview");
});

为：

var obj = document.getElementById("logoImage");
obj.onchange = function() {
    ChangeImage("logoImage", "#logoImagePreview");
};

我得到了我希望的行为。

Answer 4

change事件仅在元素失去焦点时触发。请改用keyup事件。

在动态值更改的情况下，jquery更改不起作用

4 个答案: