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?

Answer 1

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/