文本区域更改的事件答案

【问题标题】：Event for textarea changes文本区域更改的事件
【发布时间】：2010-01-15 13:18:29
【问题描述】：

我有一个 JavaScript 库，它根据某些事物使用一些数据更新 hidden <textarea> HTML 元素。

在我的 (JavaScript) 应用程序中，我想知道这些更新何时发生，而无需通过现有的库代码。

我希望有这样的活动，但显然没有。

如何监听 textarea 的变化？

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

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

【问题讨论】：

我没听懂，你说的是什么活动？ ——又读了三遍，我明白了。您希望该隐藏文本区域上的任何更新都有一个事件。
当 textarea 的内容与前一个不同时触发的事件。我认为onchange 会这样做，但如果您不与 textarea 本身交互，它不会这样做。
onchange 似乎真的没有削减它，删除了我的答案。这很糟糕 - 如果 onchange 不这样做，我想不出任何其他事件可以捕捉到这一点，除了经常轮询字段的值，这当然是可怕的。
@Pekka，我知道 :(。我将如何进行轮询？JavaScript 是单线程的，不确定这是否可能。
您可以每 x 毫秒设置一个 setTimeout。这是可以做到的，但当然是非常昂贵的。先看看我的第二个答案是否对你有帮助。

标签： javascript html dom

【解决方案1】：

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

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

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

当然，这要求您可以修改文本区域更改时的每个实例。如果给出，这可能是最优雅的方式。

【讨论】：

jQuery 中的 change 仅在有人失去对输入字段的关注时才会触发
+1 佩卡。我同意如果可能的话，编辑库将是最好的做法。 @Harmen： 他说的是编辑提问者用来触发change 事件的库。

【解决方案2】：

当然，通过设置计时器来实现这一点是一种不雅且不尊重的方式：

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

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

【讨论】：

dishonorificabilitudinitatible :'D

【解决方案3】：

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

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

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

【讨论】：

我总是对提及仅限 IE 的解决方案持怀疑态度。无论您为了提问者而发布了多少信息，以及它可能多么正确，一些讨厌 IE 的疯子都会对您投反对票，但没有提及原因。

【解决方案4】：

在 FireFox 中，您可以扩展 value 设置器：

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

【讨论】：

这太好了，因为我将只使用 Firefox！我应该指定它不会是交付给用户的应用程序，而只是我正在构建的测试套件的一部分。谢谢！
我可以为特定元素触发这个吗？
没有，但是你可以在里面测试this.id。
@Luca：是的，您可以为特定元素触发它：textareaObj.__defineSetter__('value', ...)

【解决方案5】：

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

编辑：火狐？哦，太好了，还有手表这么有趣的功能。它监视属性变化。对您而言，这意味着当库更改 textarea 的“值”属性时，您会收到通知。更棒的是，您甚至可以控制设置为属性的值。看实际操作。

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';

也许这有帮助？ :)

【讨论】：

是的，我知道，但我认为至少 textarea 会有这样的功能，因为它更像是一个“数据容器”，而不仅仅是一个文本元素。

【解决方案6】：

请注意，textarea 中的值不起作用，它作为“innerHTML”起作用，所以使用 like

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

【讨论】：

不完全正确。如果您想检查刚刚在文本区域中写入的内容，您必须使用“值”。例如：