In IE8 enter key in a form does not work

user_173789 0
Viewed 29422

I have a problem that in IE8 the enter does not work to submit a form. I have generated a test page to expose this problem. It seems that displaying the form in the onLoad function disables results that the enter button does not trigger a submit anymore. Is this a bug in IE8 or is it some security issue?

The code to reproduce this is:

onload = function() { 
    document.getElementById('test').style.display = 'block'; 
} 
#test {
    display: none;
}
<form id="test" method="get" action="javascript:alert('woei!')"> 
    <input type="text" name="user" value=""> 
    <input type="password" name="pw" value="">
    <input type="submit" value="submit" id="submit"> 
</form>

enter internet-explorer-8 forms
14 Answers

I think everthing is much more complicated than you think...

when a form's display value is set to none with a css class or just with a style attribute on page inital, hitting the enter key in a text field does not work only if you have more than one input field with text type... if you have one text field it works fine.. if you have more than one, it does not fire form submission...

Here i made a demo...

Works Fine (Normal Form) http://yasinergul.com/stackoverflow/ie8-enter-key-bug/one.html

Works Fine (Form hidden & set back visible but it's with one text input) http://yasinergul.com/stackoverflow/ie8-enter-key-bug/two.html

Does Not Work (Form hidden & set back visible but it's with two text input) http://yasinergul.com/stackoverflow/ie8-enter-key-bug/three.html

i think the best approach is to give a .hidden class to the object but not setting display:none for this css selector. you can make it hidden with jquery like

$(".hidden").hide();

as the page loads the form is shown for miliseconds but gets hidden after jquery works...

user_2541660

For any future users stumbling upon this question:

What worked for me was adding a DOCTYPE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

user_8621320

I believe Yasin has got the point. I just had the same problem: multiple text fields within a form whose visibility is "hidden". My workaround (to prevent the form from flashing) is to set the form opacity to 0 in the css, and then customise its style settings with jQuery on document ready.

I believe this is not something to fix with JS.

Admin1

Yeah, I was bitten by this bug too today. I found this workaround, though (diff from the OP):

 <script type="text/javascript"> 
 onload = function() { 
     document.getElementById('test').style.display = 'block'; 
+    document.getElementById('test').innerHTML =
+        document.getElementById('test').innerHTML;
 } 
 </script> 
 </head>

Simply recreate the contents of the form from the contents of itself. Yikes. But it works. (Famous last words...)

user_3457160
Related