IE readonly textarea problem

问题

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.

回答1:

That's working as intended (by Microsoft). It's going to take two clicks to start typing because on the first click it's still read only, so the element wouldn't focus. You need to either focus the element with Javascript after changing read only, or your users will have to double click. This is because IE doesn't focus the disabled element, Chrome does, even though you can't type.

Edit to add solution

IE doesn't appear to like .focus(); in this case, but .select(); works.

document.getElementById('yourTextareaId').onclick = function() {
    this.readOnly = false;
    this.select();
}

回答2:

Maybe I misunderstood the question, but I changed onclick to onfocus and it seemed to work fine.

(Edit: That's just a straight copy-paste of your snippet, no doctypes or anything else, and viewing in IE7.)

来源：https://stackoverflow.com/questions/3764440/ie-readonly-textarea-problem

标签

internet-explorer

textarea

readonly