Question

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

如何使用jQuery和文本输入来实现这一点，其中值设置如下：

myTextControl.value = someValue

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

Answer 1

我找不到合适的活动。

是的，没有一个。

有DOM Mutation Events，但是跨浏览器不支持它们，并且不会触发表单值，因为它们没有反映在属性中（IE中除了由于错误）。< / p>

仅在Mozilla中，可以在value属性上设置JavaScript watch以捕获脚本化更改。仅在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：使用连续检查值是否更改的函数实现输入值的轮询。（沿着这些方向的东西）。

//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 Mutation Events

W3C DOMAttrModified Event

MSDN DHTML propertychange Event

jQuery CSS Property Monitoring Plug-in updated

最后一个链接是一些人基本上已经制作了一个jQuery插件来做我所描述的事情（我未经测试，只是作为参考提供）

Answer 3

使用Jquery

您还可以在输入字段中使用这些事件侦听器，例如

$("yourid").on("change",function(){
//here do something
});
$("yourid").on("keypress",function(){
//here do something
});

$("yourid").on("keydown",function(){
//here do something
});

$("yourid").on("keyup",function(){
//here do something
});

Answer 4

试试这个

$('#myTextControl').bind('input', function(){
  console.log('value changed');
});

Answer 5

var oldVal = $('#myTextControl').val();

//Your script that changes the value

if(oldVal != $('#myTextControl').val())
{
//Your content has changed, do something
}

Answer 6

当您正在观看的元素具有焦点时，您需要收听键盘事件。

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

6 个答案:

阅读链接