HTML: Form

Hit `ENTER` to Submit Form

Form Spec:

If a form has only one input field then hitting enter in this field triggers form submit (ngSubmit)
if a form has 2+ input fields and no buttons or input[type=submit] then hitting enter doesn't trigger submit
- If the form has no submit button, then the implicit submission mechanism must do nothing if the form has more than one field that blocks implicit submission.
if a form has one or more input fields and one or more buttons or input[type=submit] then hitting enter in any of the input fields will trigger the click handler on the first button or input[type=submit] (ngClick) and a submit handler on the enclosing form (ngSubmit)

That means:

If you only have one input, then you don't need input[type=submit]. Hit ENTER will submit the form.
If you have more than one blocking input, then hitting ENTER will NOT submit the form unless you have a input[type=submit].
- It also means on mobile, even you see search button (because your input is type search), hitting search won't do anything. The fix is to have a hidden submit button so 'search' button works.

For Angular:

use ng-submit on the form instead of button(ng-click) to make sure ENTER works.

iOS:

The 'Go' button is only shown: if the input tag is inside a form tag with action property. Otherwise shows a return button. See: http://stackoverflow.com/questions/22986347
The 'Search' button is shown when <input type='search'> or name of the input contains 'search'

Android:

When you have submit button:

When you don't have submit button:

if you ONLY have one input in the form, it'll work by press the 'Go'.
if you have more than one input:
- create a submit type button with style="visibility:hidden;position:absolute" (don't show and don't mess container layout)
  Ref:
http://stackoverflow.com/questions/5665203/getting-iphone-go-button-to-submit-form

Last updated 6 years ago