Submitting a form by hitting return 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 via style="display:none").

When you hit the return key when an input field is focused in Firefox, the form submits.

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

Here's 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>

Solution 1

I have literally no idea why it's not working in Chrome. I think it's a bug.

However, it is somehow to do with that display: none.

I found a nasty, horrible (!!) workaround:

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

Don't hide it: instead, position it off the screen.

Live Demo - works in Chrome.

Solution 2

Tested in Chrome 22 and Firefox 18 perhaps this is the best workaround

.hide-submit {
    position: absolute;
    visibility: hidden;
}

<button type="submit" class="hide-submit">Ok</button>

Or a more generic 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 element in plain sight, no need to push it outside the screen

Solution 3

The best way to do this is:

<input type="submit" hidden />

Example:

<form onSubmit="event.preventDefault(); alert('logging in!')">
  <label for="email">email:</label>
  <input type="email" name="email" required />

  <label for="password">password:</label>
  <input type="password" name="password" required />

  <input type="submit" hidden />

  <p>Press enter to log in</p>
</form>

Solution 4

Probably a security "feature", although I haven't found a definitive explanation yet. I tried http://jsfiddle.net/B59rV/2/ without the password field and the alert occurs as expected. Same thing happens in IE8 for what it's worth. Those are the only browsers I have on this machine, so haven't tested on any others.

View more solutions