ansaurus

Question

In IE8 enter key in a form does not work

Answer 1

A:

I tried it in IE8 and it works for me. You have to make sure that part of the form has focus though.

Javascript has a focus function that you can use to set the focus if that's what you need.

var textbox = document.getElementById("whatever name input box's id will be");
if(textbox) textbox.focus();

CodePartizan 2009-09-15 15:52:31

Yeah, for some odd reason when I open it as a local file I don't get to choose whether to use compatability and it works. I put in in IIS and then it let me choose not to us compatability and I see the behavior you describe. Weird . . .

CodePartizan 2009-09-17 14:28:20

Answer 2

A:

You may want to add a onkeyup event to your input boxes so that if you hit an enter in the input box then it will also submit.

As CodePartizan mentioned, you need the focus on the button otherwise, so if you tab over to the button, or click on it, it seems to work for me also.

James Black 2009-09-15 16:02:52

Answer 3

+3 A:

I can't say if it is a bug exactly, but I can confirm that the behavior you report has changed in IE 8... and I imagine it is probably a bug, not an deliberate change.

If the form is set with CSS display:none the default submit button behavior doesn't work.

Other browsers, including IE 7 (or even IE 8 using IE 7 standard compatibility mode) do not have problems.

I've worked around the problem myself by just using height:0px; in the CSS, then having javascript set the appropriate height when I want to show the form. Using height instead, the default enter key submit behavior seems to work normally.

Stephen M. Redd 2009-09-15 16:08:21

Answer 4

A:

thanks guys for your respones.

I'm curious why it is working for CodePartizan (no ie7-compatibility mode right..? :) ). For testing, I did click on the textfield first before pressing enter, but only clicking on the button (or tabbing to it and pressing enter) results in a submit. But that is not what I want, I want to be able to press enter in one of the textfields and trigger a submit by doing so, which is normal behavior in IE6-7 and FF3.

@stephen That is a good idea. I will try that tomorrow.

2009-09-15 18:23:27

Answer 5

+4 A:

I have found a proper solution and wanted it to share with u guys.

Instead of using <input type="submit...>, use <button type="submit"...>. This will do exactly the same in the other browsers (IE6-7, FF3) AND works in IE8. :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; 
<html> 
<head> 
<style type="text/css">
#test {
    display: none;
} 
</style> 
<script type="text/javascript"> 
onload = function() { 
    document.getElementById('test').style.display = 'block'; 
};
</script> 
</head> 
<body> 
<form id="test" method="get" action="javascript:alert('woei!')"> 
    <input type="text" name="user" value="" /> 
    <input type="password" name="pw" value="" />
    <button type="submit" value="submit" id="submit"></button>
</form> 
</body> 
</html>

Andre 2009-09-16 15:14:25

Answer 6

A:

A simple javascript function will be able to fix it. Please check this article at

http://forum.tutorials2learn.com/viewtopic.php?f=5&t=2

satz 2009-10-02 12:45:31

Answer 7

+1 A:

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...

Yasin Ergul 2010-02-22 23:46:58

Answer 8

A:

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.

cuginoAle 2010-03-01 11:23:20

ansaurus

tags:

views:

answers:

In IE8 enter key in a form does not work

related questions