How can I leverage the 'Go' or 'Submit' button on a mobile software keyboard in a HTML5 app?

Question

Mobile devices with software keyboards often change the keyboard when filling in a web form to allow the user to submit with one click and avoid jabbing at the 'submit' button of the form.

How can one access this functionality from a phonegap/cordova/other HTML5 app?

I struggled with this for a while, so gonna share the answer here.

Answer 1

This blog post by Matt Nunes showed me that the type="submit" input should be the first button in the form.

Once you know this, you might be satisfied, but I wanted to hide the button - why have it when you want the user to use their keyboard? For an outline of how to do this, check out this related question - Is it too much to ask to have an invisible button on jQuery Mobile?

Effectively, when the user taps the 'go' button on their soft keyboard, it shows up to the browser as a click on the submit button. Therefore,

(1) Override the default event

(2) Profit.

Hopefully this helps someone.