Problem coloring tables if things change

[arbitter]

Hi there it's me again, I'm starting to feel like I'm spamming the forum but I can't find the solution with my knowledge, nor with that that I can find. Here's the problem:

 

I have a textarea with text in it. Next to the textarea there is a table cell with a border in a color.

When the user has not selected the textarea, the border is green. When a user selects it, it turns orange, but if he doesn't click anything it changes to green again on blur. If something changes, it turns red immediately, even if he loses focus of the element.

So these are the things that are used:

onBlur, onFocus and onClick.

 

Now as you might anticipate, I don't want it to change the color if solely an arrow or so on the keyboard is pressed. So I must find a way to get the original value of the textarea in the function, so that when that value stays the same and you lose focus the color goes green again. Whilst writing this I noticed it would be possible to include the value in the function, but since it's user input and it can contain any characters, I don't quite trust that... Or can javascript handle this safely?

 

Anyhow; here's the script in case I wasn't clear enough:

<script type='text/javascript'>
function changeColor(id,color,type)
{
if(type== 'focus' || type == 'keydown'){
	document.getElementById(id).style.borderColor=color;
}else if(type=='blur' && document.getElementById(id).style.borderColor == 'orange'){
	document.getElementById(id).style.borderColor='green';
}else{document.getElementById(id).style.borderColor='red';}
}
</script>

 

<?php
while($row = mysql_fetch_array($result))
{
echo "<form name='form".$row['photoid']."'>";
echo "<table>";
echo "<tr><td>"."<img src='fotos/" . $row['photoid'] . $row['type'] . "' />";
echo "</td><td>"."<textarea rows='5' cols='30' onkeydown=\"textCounter(this.form.a".$row['photoid'].",this.form.counter);this.form.s".$row['photoid'].".disabled=false;changeColor('c".$row['photoid']."','red','keydown');\" onkeyup='textCounter(this.form.a".$row['photoid'].",this.form.counter);' id='a".$row['photoid']."' name='".$row['photoid']."' onfocus=\"changeColor('c".$row['photoid']."','orange','focus')\" onblur=\"changeColor('c".$row['photoid']."','red','blur')\">".$row['description']."</textarea>";
echo "</td><td id='c".$row['photoid']."' style='border:2px solid green;' >Hallo";
echo "</td><td>"."<input id='s".$row['photoid']."' type='button' onclick=\"update(getElementsByName('".$row['photoid']."')[0].value," . $row['photoid'] . ")\" value='sla op' disabled='disabled' />";
echo "</td><td>" . "<div id='".$row['photoid']."'></div>";
echo "</td></tr><tr><td></td><td>". "U heeft nog <input readonly type='text' name='counter' size='3' maxlength='3' value='140' /> tekens over.";
echo "</td><td></td><td></td><td></td></tr></table>";
echo "</form>";
echo "<hr />";
}
?>