Textarea is not editable (not readonly) in IE

Question

A minimal code that reproduces the problem is as follows:

<div class="cell">
  <input type="text" size=1>
  <textarea style="display:none;"></textarea>
</div>
<script type="text/javascript">
  $('.cell input').focusin(function() {
    $(this).hide();
    $('.cell textarea').show().focus();
  });
</script>

When the input element is clicked, it should be hidden and the textarea should be shown and focused. This works fine, but only in IE (even IE9) the textarea behaves like readonly, though it is focusable and the readonly attribute is not set. When the textarea is clicked again, it becomes editable.

Also I tried select() instead of focus(), as suggested in IE readonly textarea problem but no difference in the result.

What am I missing?

I just tested this in Chrome and it works fine, but in IE9, it's as you describe http://jsfiddle.net/aUDJn/ What the heck IE? — gen_Eric, Mar 21 '12 at 14:49

score 4 · Accepted Answer · edited May 23 '17 at 12:27

For some reason if you focus it right away, you can't type in it. But, if you wait a bit before focusing it, it works. If you focus it inside a setTimeout(func, 0), it works.

Using 0 as the milliseconds arguments in setTimeout basically pushes the function to the bottom of the call stack, and sometimes that fixes stuff. Not really sure why.

EDIT: This question explains why this works: Why is setTimeout(fn, 0) sometimes useful?

$('.cell input').focusin(function() {
    $(this).hide();
    $('.cell textarea').show();
    setTimeout(function(){
        $('.cell textarea').focus();
    }, 0);
});

DEMO: http://jsfiddle.net/aUDJn/1/

Thanks a lot for the link as well as the answer. – viky Mar 22 '12 at 05:40 — viky, Mar 22 '12 at 05:40

Textarea is not editable (not readonly) in IE

1 Answers1