JS事件:在文本输入上挂钩值变化事件

Question

我有一个文本输入,其内容由脚本而不是用户更改.所以我想在值发生变化时触发事件.我找不到合适的活动.我甚至在StackOverflow上发现了这个,但它不是我正在寻找的解决方案.

如何使用jQuery和文本输入使这个值设置如下:

myTextControl.value = someValue

在这里,我想触发一个事件来查看新值.

Answer 1

我找不到合适的活动.

是的,没有一个.

有DOM Mutation事件,但它们不支持跨浏览器,并且不会触发表单值,因为它们没有反映在属性中(IE中除了由于错误).

仅在Mozilla中,可以在value属性上设置JavaScript 监视以捕获脚本化更改.仅在IE中,可以设置JScript onpropertychange处理程序以捕获脚本和用户驱动的更改.在其他浏览器中,您必须使用自己的间隔轮询器来查找更改.

function watchProperty(obj, name, handler) {
    if ('watch' in obj) {
        obj.watch(name, handler);
    } else if ('onpropertychange' in obj) {
        name= name.toLowerCase();
        obj.onpropertychange= function() {
            if (window.event.propertyName.toLowerCase()===name)
                handler.call(obj);
        };
    } else {
        var o= obj[name];
        setInterval(function() {
            var n= obj[name];
            if (o!==n) {
                o= n;
                handler.call(obj);
            }
        }, 200);
    }
}

watchProperty(document.getElementById('myinput'), 'value', function() {
    alert('changed!');
});

这非常令人不满意.它不会响应Mozilla中用户驱动的更改,它只允许IE中每个对象一个监视属性,而在其他浏览器中,处理函数将在执行流程中稍后调用.

重写脚本设置value为调用setValue包装函数的部分几乎肯定更好,您可以监视要捕获的更改.

Answer 2

您可以像这样向输入字段添加普通事件监听器.(使用jQuery)

$(myTextControl).change(function() {
    ...
    /* do appropriate event handling here */
    ...
});

好吧,考虑到改变输入值的javascript不受你的控制,它变得困难.你有两个选择:

1.) Crossbrowser compatible:使用一个连续检查值是否改变的函数实现输入值的轮询.(沿着这些方向的东西).

//at beginning before other scripts changes the value create a global variable
var oldValue = myTextControl.value;

function checkIfValueChanged() {
    if(myTextControl.value != oldValue) {
        $(myTextControl).trigger("change");
        clearInterval(checker);
    }
}

//every 500ms check if value changed
var checker = setInterval('checkIfValueChanged()', 500);

注意:如果您的脚本或用户也可以更改该值,则必须实现某些操作才能捕获此值,以免多次触发更改事件.

如果外部脚本可以多次更改该值,则只需运行interval函数而不是取消它,只需更新oldValue;

2.) AFAIK所有浏览器都不支持(？测试你需要支持的浏览器)

你可以绑定到一个特殊的DOM Level 3Event :( DOMAttrModified在Firefox中,也许其他人也认为Opera也有它,Safari ??,Chrome ??)而在IE当然它有一个不同的名称propertychange(并且是专有的,不同于W3C行为)

现在理想情况下,您可以组合这两个选项并检查是否支持DOMAttrModified或propertychange是否存在并相应地使用或回退到轮询解决方案.

阅读链接

W3C DOM突变事件

W3C DOMAttrModified事件

MSDN DHTML propertychange事件

jQuery CSS Property Monitoring插件已更新

最后一个链接是一些人基本上已经制作了一个jQuery插件做我描述的事情(我未经测试,仅作为参考提供)

Answer 3

当您正在观看的元素获得焦点时，您需要监听键盘事件。