Go VS. Return Button in iOS Keyboard for HTML Input Forms

Go vs. return button in iOS keyboard for HTML input forms

Update 2020/2021

As Cameron Cobb pointed out,
Safari Mobile supports the new HTML attribute enterkeyhint since version 13.7 ~ Sept. 2020 (https://caniuse.com/mdn-html_global_attributes_enterkeyhint).

The following values are possible (https://mixable.blog/ux-improvements-enterkeyhint-to-define-action-label-for-the-keyboard-of-mobile-devices/):

<input enterkeyhint="enter">
<input enterkeyhint="done">
<input enterkeyhint="go">
<input enterkeyhint="next">
<input enterkeyhint="previous">
<input enterkeyhint="search">
<input enterkeyhint="send">

---

Original Answer

Aha...

The 'Go' button is only shown, if the <input> tag is inside a <form> tag (and the form tag has an action attribute).
So, if you access your form elements afterwards with i.e. JavaScript, you can omit <form> tags.

'Go' button:

<form action="..." method="...">
   <input type="text"></input>
</form>

'return' button:

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

Getting iPhone GO button to submit form

So, here was our specific issue:

We had a form with multiple user input fields, but not a true <input type="submit"> (it was being submitted via JS).

As such, the GO button did nothing.

We then added an <input type="submit"> and set it to display: none hoping that would do the trick. Nope. Didn't work.

On a whim, we changed display: none to margin-left: -1000px

That worked!

Apparently, Safari is looking for the presence of a SUBMIT button in the form and only if it's not display: none, it will then fire it when you hit the GO button.

What is the difference between tapping keyboard Go button and web page button

Your workaround seems reasonable.

About activating Universal Links when user navigates from keyboard: this case seems to be similar to situation when user types some URL to browser's address bar and tap GO. If user doing this, than the user intent is to stay in browser, not go to the App. So it is logical to not engage Universal Links.

One more way to make better experience for this case:
if user navigated to "special redirect page" on iPhone, try to navigate to customURLScheme URL of your App. At this point you already know that the App is installed on this device.
Trying to navigate to customURLScheme URL will bring up iOS system dialog, like "Do you want to open XYZ App?". Still this seems a bit better than "Tap here if you're not automatically redirected back to the application".

Probably you already found out that "special redirect page" should be located on different domain than "Universal Links enabled domain". Navigating inside the same domain will not engage Universal Links. For reference, App Preview page that we have, serves essentially the same purpose as yours "special redirect page".

IBM Worklight 6.1 - How to display the iOS keyboard with a Go button?

See here: Go vs. return button in iOS keyboard for HTML input forms

The 'Go' button is only shown, if the <input> tag is inside a
<form> tag. So, if you access your form elements afterwards with
i.e. JavaScript, you can omit <form> tags.

'Go' button:

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

return button:

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

How can I prevent the Go button on iPad/iPhone from posting the form

I found a solution to my problem.

The base to the problem is that Safari mobile ignores onsubmit="return false" on buttons, it only works on forms.

Setting onsubmit="return false;" on the form, making a normal button (not submit) and setting onclick="form.submit()".

Ex.

<form method="post" onsubmit="return false;">
    ... //Other fields here

    <input type="button" value="Send" onclick="form.submit();" />
</form>

The Go button does not trigger a normal button, only submit buttons.
Since the form has onsubmit="return false;" it will not post.

The button on the other hand, when clicked triggers the onclick="form.submit();" which overrides the onsubmit on the form.

This solution seems to work in any browser reliably.

Search button on ios keyboard does not submit the form

Finally, i just changed the css styling of the submit button to this:

style="position: fixed; top: -1000px;"

Solution found here: Getting iPhone GO button to submit form

---

Related Topics