Question

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

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

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

任何指针都会受到赞赏。

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

为了使其更具体，这是我必须处理的直接问题：如何在IE 11和Chrome中检测输入元素值的程序化更改？

Answer 1

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

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

Answer 2

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

如果您可以控制所有相关代码，这不应该是一个太大的问题;如果你不这样做，你可能需要求助于轮询你关心的字段的setInterval（）。

Konstantin的答案涵盖了与直接用户输入相关的大多数情况。对于程序化更改，如果您使用的是像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
    });
})

如何观察表单元素属性？

2 个答案: