I'm seeing an issue in IE7 and IE8 (but not other browsers) with a textarea when I dynamically change its "readonly" attribute. The textarea is initially defined as being read-only, and when the user clicks inside the textbox I set readOnly to false. At this point, if I type any normal characters, they don't get displayed - in fact, the text box acts like it is still read-only (i.e., arrow keys move around, hitting Delete goes to the previous page, etc.)
If I click inside the textarea again, typing works normally.
Here's a code snippet that illustrates the problem:
<html>
<head></head>
<body>
<textarea id="txt1" onclick="document.getElementById('txt1').readOnly = false" readonly=true>Click in here and try typing.</textarea>
</body>
</html>
I've tried different doctypes. I've tried manually calling focus() and click() in the click handler. I've tried setting a timer to set the readOnly flag. I've tried using setAttribute() / removeAttribute(). No joy with any of those approaches.
Update
I ended up using contentEditable, but only for IE - I'm still using readOnly for FF and Safari/Chrome, because contentEditable seemed to not work for those browsers. I'll have to recheck with IE9, too.