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.

Mobile

'Go' or 'Search' button on Soft Keyboard

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:

  • Shows 'Go' for text inputs

  • SHows 'Next' to number inputs

How to use keyboard 'Go' or 'Search' to submit form?

When you have submit button:

  • by default the key press will submit the form

When you don't have submit button:

How to hide soft keyboard manually?

Use blur() on active element: https://github.com/caiogondim/hide-virtual-keyboard.js/blob/master/src/index.js

Library

Last updated