jquery改变不起作用的动态值变化
在jQuery中,如果textbox的值从其他事件动态变化,我如何跟踪onchange
事件。 我尝试了这个,但它不起作用:
$("#txtbox").change(function(){ alert("change"); });
keyup
不包括所有自然情况:(
change
和keyup
不起作用的两种情况:
- 浏览器表单自动完成机制
- 从系统剪贴板执行鼠标粘贴。
示例:form具有用于将电子邮件地址放入其中的文本框,并且onchange上附加了keyup事件。
当用户开始键入电子邮件地址时,如果弹出Chrome或Firefox自动完成框并且用户单击其中一个选项,则该框将填充该值,焦点保留在文本框中(因此没有更改事件触发)并且未按任何键(没有键盘事件)。 我尝试将click附加到列表中,但它会在我的浏览器中引起奇怪的行为。
与粘贴类似 – 如果鼠标用于粘贴(通过右键单击可用的上下文菜单)),则不会触发keyup和change事件。
任何人都有一个完整的解决方案,即如何处理输入值的实际变化?
我一直在寻找这样的解决方案,在没有用户需要离开元素的情况下触发,但这适用于所有情况,包括Jakub在他的post中发现的情况。 即
- 正常打字
- 通过鼠标粘贴
- 自动完成
理想情况下我也想要一个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中的测试中,没有发生这种情况。 然而,如果函数运行“太多”次,我没有意识到这一点是幸运的,因此没有进一步测试这个特定方面(例如其他浏览器)。
我同意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"); };
我得到了我希望的行为。
仅在元素失去焦点时才会触发change
事件。 请改用keyup
事件。