0

我有一个表单，其中的元素input可以select以多种不同的方式更新（用户输入、复制/粘贴、以编程方式添加或删除的选择选项、以编程方式更新的值、自动完成）。与其试图捕捉所有这些动作，我更愿意观察元素属性的变化。

最简单的方法是依赖propertychange事件，不幸的是它只适用于 IE 10 及以下版本。

对于 IE 11 和 Chrome 等其他浏览器，我有哪些选择？我听说过类似Object.defineProperty对象的方法，但我不确定它如何应用于我的表单元素。我也调查了mutation observers，但我看不出它们对输入元素有什么帮助。

任何指针将不胜感激。

[编辑]我收到评论说这个问题太宽泛了。我理解，我实际上希望已经有一个明确的答案，因为在我看来这是一个如此普遍的要求。

更具体地说，这是我必须处理的直接问题：如何在 IE 11 和 Chrome 中检测对输入元素值的编程更改？

4

2 回答 2

0

我认为您正在寻找的解决方案不存在，至少不存在跨浏览器，因此该问题的任何解决方案都将涉及您的某种约定/代码纪律。

如果您可以控制所有相关代码，这应该不是什么大问题；如果您不这样做，您可能需要使用 setInterval() 来轮询您关心的字段。

康斯坦丁的回答涵盖了与直接用户输入相关的大多数情况。对于编程更改，如果您使用 jQuery 之类的库，您可以拦截调用：

var oldValFn = $.fn.val;
$.fn.val = function() {
    var result = oldValFn.apply(this, arguments);
    if(arguments.length > 0) {
        // value is being set to arguments[0]
    } else {
        // value is being retrieved, you probably don't do anything here.
    }
    return result;
};

如果您不愿意等待模糊事件，您可能还想添加一个委托的 keydown/keypress 处理程序来报告对文本字段的中间更改：

var oldVal;
$(document).on('keydown keypress', function(e) {
    $(e.target).val(); // this will be the pre-change value
    setTimeout(function() {
        $(e.target).trigger('change'); // the value will be updated _after_ the event finished bubbling
    });
})
于 2013-10-09T17:18:04.243 回答
0

对于选择框使用change事件。您也可以使用输入框绑定到同一个事件，但请记住，输入类型text只会在change模糊后触发事件（如果我没记错的话）。您可能需要为此查看自定义插件，例如http://zurb.com/playground/jquery-text-change-custom-event

此外，如果使用 jQuery .val() 修改输入的值，您可能必须使用$("input.my-input").change()不带参数显式触发更改事件

于 2013-10-09T17:09:36.573 回答