Событие для изменений в textarea

Question

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

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

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

Как я могу слушать изменения текстового поля?

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

EDIT Я буду использовать только FireFox, поскольку этот код будет только частью тестов я в здании.

Answer 1

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

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

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

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

Answer 2

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

EDITED: Firefox? О, отлично, тогда есть такая интересная функция, как часы. Он следит за изменениями свойств. Для вас это означает, что когда библиотека меняет свойство «значение» текстового поля, вы получаете уведомление. Что более приятно, так это то, что вы даже можете контролировать значение, установленное для свойства. См. В действии.

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 3

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

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

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

Answer 4

Существует, конечно, является unelegant и dishonorificabilitudinitatible пути для достижения этой цели, путем установки таймера:

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

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

Answer 5

В FireFox вы можете продлить value сеттер:

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

Answer 6

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

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