JavaScript - detecting change in a textarea

Question

I'd like the value of two textareas to always be equal. Listening for a 'change' event is not sufficient because I want these fields to be equal even when one has focus. Listening for a keypress doesn't seem to work either as this event is fired before the field's value is updated with the new letter, so I'm not sure if there's a good way to get the current value of the field using a keypress handler in order to copy it over to the other field. Any ideas?

Answer 1

How about the keyup event?

Answer 2

Browser-specific methods have been discussed here: http://stackoverflow.com/questions/919428/onpropertychange-for-a-textbox-in-firefox

However, after various experiments I found the only cross-browser method was to use window.setInterval() to check for changes (every 20 milliseconds, for example). Not elegant, but very effective.

Answer 3

//

function clonekeyup(e){
 var e= window.event || e;
 var who= e.target || e.srcElement;
 var val= who.value;
 var tem, temp, TA= document.getElementsByTagName('textarea'), L= TA.length;
 while(L){
  tem= TA[--L];
  if(tem.onchange== arguments.callee && tem.value!= val) tem.value= val;
 }
}

Assign the function onkeyup and onchange to the textareas you want to reflect each other. For instance, this assigns the handler to all the textareas.

var tem, TA= document.getElementsByTagName('textarea'), L= TA.length;
while(L){
 tem= TA[--L];
 tem.onkeyup= tem.onchange= clonekeyup;
}