Событие для изменения текстовой области

Question

У меня есть библиотека JavaScript, которая обновляет скрытый <textarea> элемент HTML с некоторыми данными, основанными на некоторых вещах.

В моем приложении (JavaScript) я хотел бы знать, когда происходят эти обновления, не обращаясь к существующему библиотечному коду.

Я надеялся, что для этого было событие, но, видимо, нет.

Как бы я слушал изменения текстовой области?

Изменения могут быть простыми как document.getElementById("myTextarea").value = "hello";

РЕДАКТИРОВАТЬ Я буду использовать только FireFox, так как этот код будет только частью набора тестов Я создаю.

Answer 1

Если вы управляете библиотекой Javascript, которую вы упоминаете, я бы сказал, что самый простой способ - вручную запускать событие change каждый раз, когда вы изменяете значение поля.

Я думаю, вот как это делается в JQuery: События / изменения В противном случае простой document.getElementById('myTextarea').onchange() может также работать.

Если у вас много вызовов, вы можете обернуть изменение значения и запуск события в функцию changeFormElement(id, value).

Это, конечно, требует, чтобы вы могли изменять каждый случай, когда изменяется текстовая область. Если это дано, это, вероятно, самый элегантный способ.

Answer 2

В FireFox вы можете расширить value сеттер:

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

Answer 3

Я знаю, что это, вероятно, не то, что вы хотите услышать, но, похоже, только в IE есть событие, способное справиться с этим. Это событие onpropertychange.

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

Если вам разрешено изменять код библиотеки, я сделал бы так, как упомянул Пекка, и настроил код так, чтобы он вызывал событие изменения. Единственная настоящая кросс-браузерная вещь, которую вы можете сделать, это использовать таймер. Если вы используете достаточно низкочастотный таймер, для конечного пользователя, вероятно, даже не будет заметно, что вы не используете событие.

Answer 4

Конечно, существует нелегкий и бесчестный способ достичь этого путем установки таймера:

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

Это будет сравнивать значение каждые пять секунд со значением пять секунд назад.

Answer 5

События DOM не происходят, когда значение для узла задается программно через node.value; Найдите документацию по API вашей библиотеки JavaScript и посмотрите, есть ли у них механизм уведомления.

Отредактировано: Firefox? О, отлично, тогда есть такая интересная функция, как часы. Он следит за изменениями собственности. Для вас это означает, что когда библиотека изменяет свойство '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 6

Обратите внимание, что в textarea значение не работает, оно работает как "innerHTML", поэтому используйте как

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