"Enter/Return" Key to Submit Forms in HTML5

Saverio, Jun 14

In a lot of our projects, we use custom buttons built with CSS to really make the form look clean and polished. They look awesome, but a lot of the times, we're not able to have some functionality that the native "button" or "submit" tags will give you. To fix this, we usually just throw a hidden submit button on the page like this:

<input type="submit" value="Submit the form!" style="display: none;" />

This usually works fine, but in HTML5, it seems the spec has changed a bit and the latest Webkit (as seen in Safari 5) have changed the way they do this and actually don't respond to the enter/return key here. Apparently if the element is set to display: none, it won't respond to user events. To fix this, we just need to hide the element while still making it "visible" to user events. The following works just great:

<input type="submit" value="Submit the form!" style="position: absolute; top: 0; left: 0; z-index: 0; width: 1px; height: 1px; visibility: hidden;" />

Simple change, but it works very well.

blog comments powered by Disqus