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>
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.
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
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>
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.
The only workaround i found, at least as dirty as positioning it out of the screen, is width:0; height:0;
width:0; height:0;
: somehow, Chrome doesn't interpret it like a hidden element
This is like Pioul's answer but I needed to do the following for a 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]
Just another approach but I don't think this is much better than the accepted answer.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.