Submitting the form by clicking the return button when the submit button is hidden; works in Firefox, does nothing in Chrome

Question

I have a form with some input fields and a hidden submit button (hidden using style = "display: none").

When you press the return key, when the input field is focused in Firefox, the form is submitted.

However, in Chrome, when you press return, nothing happens. I was wondering how to add this functionality in Chrome?

Here is the form, take a look at it in Chrome: http://jsfiddle.net/B59rV/2/

<form method="post" action="/xxxx" accept-charset="UTF-8"> <input type="hidden" value="SSjovFqEfRwz2vYDIsB6JRdtLAuXGmnT+tkyZnrtqEE=" name="authenticity_token"> <div class="input text_field"> <label>Email</label> <input type="text" size="30" name="user_session[email]" /> </div> <div class="input text_field"> <label>Password</label> <input type="password" size="30" name="user_session[password]" /> </div> <input type="submit" value="Sign In" style="display: none;" > </form> 

Answer 1

I have no idea why it does not work in Chrome. I think this is a mistake.

However, this has something to do with this display: none .

I found an unpleasant, terrible (!!) workaround:

 input[type="submit"] { position: absolute; top: -1000px } 

Do not hide it: place it on the screen instead.

Live Demo - Works in Chrome.

Answer 2

Tested in Chrome 22 and Firefox 18 browsers, maybe this is the best workaround

 .hide-submit { position: absolute; visibility: hidden; } <button type="submit" class="hide-submit">Ok</button> 

Or a more general way

 input[type=submit].hide, button[type=submit].hide { display: block; position: absolute; visibility: hidden; } <input type="submit" class="hide">Go</input> 

This basically hides the item in sight, there is no need to push it off the screen

Answer 3

Probably a safety feature, although I have not yet found a definitive explanation. I tried http://jsfiddle.net/B59rV/2/ without a password field, and a warning appears as expected. The same thing happens in IE8 for what it costs. These are the only browsers that I have on this machine, so they have not been tested on any others.

Answer 4

The only workaround I found is at least as dirty as its location on the screen, width:0; height:0; width:0; height:0; : somehow Chrome doesn't interpret it as a hidden element

Answer 5

This is similar to Pioul's answer, but I needed to do the following for the input [type = file] element:

 position:absolute; //this helps the "hidden" element not disrupt the layout width:0; height:0; // For <= IE7 a 1px piece of the form element still shows // hide it with opacity=0; Tested element was input:file. filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); 

NOT tested with input [type = text]

Another approach, but I don't think this is much better than the accepted answer.