IE8 - Form within a hidden div, return key no longer works.

Question

I have a login form that resides within a div with display: none; I then fade in the form using jquery but the Enter/Return key no longer submits the form. If I change the display to block, it works fine. This problem is IE only.

Any ideas?

Here's an example code that doesn't work;

<div id='formdiv' style='display: none;'>
<form id='loginForm' name='createLoginForm' method='post' action='' >
    <input type='text' name='username' id='username' />
    <input type='password' name='password' id='password' />
    <input type='submit' name='submit' id='login_submit'  />
</form>
</div>

And I stuck this in the to test the hiding/showing;

<script type="text/javascript" src="jquery.tools.min.js"></script>

<script type='text/javascript'>
setTimeout('$("#formdiv").show()',1000);
</script>

Answer 1

Not sure what's causing the problem, but refreshing the div's html after it's shown seems to fix the form:

$(document).ready(function(){
    $('#formdiv').show(500, function(){
     $('#formdiv').html($('#formdiv').html());
    });
});

Definitely not ideal, but since it seems to be an actual IE8 or jQuery bug, you may have to resort to a hack like this (maybe with a browser check around it).

Answer 2

Since the problem seems relevant to whether the element appears on the page or not, you can still have it appear, but "cloak" it using a 1x1 wrapper div with overflow: hidden;

<style type="text/css" media="screen">
  .submit-wrapper
  {
    overflow: hidden;
    height: 1px;
    width: 1px;
    position: absolute;
    top: 0;
    right: 0;
  }
</style>

<div class="submit-wrapper">
  <input type="submit" value="Save" />
</div>