2

I have a basic form that is being handled by Angular (classes and labels omitted for clarity):

<form>
    <input type="text" />
    <input type="number" />
</form>

On desktop view, both inputs allow me to press the Enter key to submit the form to Angular.

However, on mobile view (tested on Chrome Android 5.0), only the text input allows pushing the enter button to submit the form to Angular. When pressing the Enter button while in the number input, nothing happens.

Is this a known bug? Does a workaround exist for this issue?

EDIT:

The same behavior also occurs in case of only one input:

<form>
    <input type="text" />
</form>

<form>
    <input type="number" />
</form>
Propaganistas
  • 1,674
  • 1
  • 17
  • 40

1 Answers1

2

The mobile keyboard doesn't work the way you think it does, and that's the problem. If there is only 1 input field in a form the enter key submits the form, but if there are 2 or more the enter key moves to the next input.

In your <form> example it's missing a submit button after the number field. So Chrome has no next input to go to. So it's just a dead end.

You could try adding an <input type="submit" value="Go"> and setting it's visibility to 0. I would recommend having at least a small submit icon.

Forms that submit via enter key only are by design not mobile friendly.

Here's a reference to a similar SO question:

HTML: Why does Android browser show "Go" instead of "Next" in keyboard?

Community
  • 1
  • 1
Reactgular
  • 52,335
  • 19
  • 158
  • 208
  • If only the text input is present without submit input, mobile keyboard will submit the form. If only the number input is present without submit input the mobile keyboard won't submit the form... So a submit input is theoretically not required for Angular to submit the form I guess. So why the different behavior of the mobile keyboard enter button between these two input types? – Propaganistas Oct 19 '15 at 15:14
  • 1
    It's not an angular issue. The default behavior in Chrome for a single text input is to assume it's a search field. If that field is a number type there is no default name for the submit, and therefore Chrome doesn't know what to call the enter key. So it just ignores it. It's dump I know, but that's how I understand it. – Reactgular Oct 19 '15 at 15:33
  • Ok, thanks for the clarification on default behavior of a text input as search field. Follow-up question: if a visible ` – Propaganistas Oct 19 '15 at 15:59
  • 1
    Try `` and if that doesn't work. Well then that just sucks. I hate it when mobile has issues like this. I've seen some really stupid issues on Safari with iPhones and HTML. – Reactgular Oct 19 '15 at 16:07
  • Too bad I'm restricted to ` – Propaganistas Oct 19 '15 at 16:20