Question

我有一个JavaScript库，可以根据某些内容更新隐藏 <textarea> HTML元素和一些数据。

在我的（JavaScript）应用程序中，我想知道何时发生这些更新，而不必查看现有的库代码。

我希望有一个事件，但显然不是。

我如何收听textarea的更改？

更改可以像document.getElementById("myTextarea").value = "hello";

一样简单

编辑我将仅使用FireFox，因为此代码只是我正在构建的测试套件的一部分。

Answer 1

如果你控制你提到的Javascript库，我会说最简单的方法是每次更改字段值时手动触发 change事件。

我认为这是在JQuery中完成的：Events/change否则，一个简单的document.getElementById('myTextarea').onchange()也可能会起作用。

如果你有很多电话，你可以将值的更改和事件的触发包装到changeFormElement(id, value)函数中。

当然，这需要您修改textarea更改时的每个实例。如果给出，这可能是最优雅的方式。

Answer 2

我知道这可能不是你想听到的，但只有IE似乎有一个事件可以处理这个。这是onpropertychange事件。

textArea.onpropertychange = function ()
{
    if (event.propertyName == "innerText")
        alert('innerText has changed.');
}

如果允许修改库的代码，我会像Pekka提到的那样进行调整并调整代码，以便触发更改事件。您可以做的唯一真正的跨浏览器是使用计时器。如果您使用足够低的频率计时器，最终用户可能甚至不会注意到您没有使用事件。

Answer 3

在FireFox中，您可以扩展value setter：

HTMLTextAreaElement.prototype.__defineSetter__("value", function(t) {
    alert('someone is setting the value of a textarea');
    return this.textContent = t;
});

Answer 4

当通过node.value以编程方式设置节点的值时，不会发生DOM事件;搜索JavaScript库的API文档，看看它们是否有一些通知机制。

编辑：Firefox？哦，太棒了，那就像手表一样有趣。它关注房地产的变化。对您而言，这意味着，当库更改textarea的'value'属性时，您会收到通知。更好的是，你甚至可以控制设置给该属性的值。见行动。

var textnode = document.createElement('textarea');
textnode.watch('value', function(attr, oldv, newv){
    alert(newv);
    return newv; // you have to return correct value back.
});

//and now trigger the change to see that this works.
textnode.value = 'Bla';

也许这会有帮助吗？：）

Answer 5

当然，通过设置计时器，实现这一目标的方式有一种不优雅和不可改善的方式：

var oldVal, el;
function setTimer(){
    setTimeout(function(){
        if(el.value != oldVal){
            console.log('something happened');
            oldVal = el.value;
        }
        setTimer();
    }, 5000);
};

这会将每五秒的值与五秒前的值进行比较。

Answer 6

请注意，在textarea值不起作用时，它的作用为“innerHTML”，因此请使用

document.getElementById("myTextarea").innerHTML = "hello";

textarea事件的变化

6 个答案: