Getting iPhone GO button to submit form

Question

Is anyone aware of what variables go into a form to make the iPhones virtual keyboard's GO button submit the form vs. not?

I've been trying to narrow down the scenarios and this is what I've found:

• if FORM has only one user input field, go button automatically submits form

• if FORM has more than one user input field, but no INPUT TYPE="SUBMIT" then the GO button does not submit the form.

• if FORM has more than one user input field AND has an INPUT TYPE="SUBMIT" then the go button does submit the form.

However, that's not completely accurate, as we're running into a situation the 3rd isn't working for us.

Is anyone aware of the other factors that go into the GO button working vs. not working?

• mowgli: Extra info: If FORM has a TEXTAREA field, and the user is typing in that, then a GO button is not shown. Im trying to find a solution
• lakerolmaker: You need to have a action (can be non-specified), nothing else matters.

Answer 1

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.

• Tom S.: We took the same approach, but instead of margin-left we just pushed it back using z-index and hide it under our graphical button by using some position relative fun.
• Jurgen: Tried doing it with visibilty:hidden; this works, but obviously the button is then drawn on the screen but not shown... thus taking place and making my form ugly. Setting it to position:absolute; and left:-1000px; worked for me too
• adriendenat: Beware of that "off screen" techniques ! With css 3d transforms websites (or websites using perspective etc.) even if the object is NOT display on the screen, the browser calculates it. It causes a (huge) drop down in performance (even on the famous text-indent: -9999px !). So I'll prefer the opacity:0/visibility:hidden solution
• DA.: @Grsmto interesting point! In fact, I think I'm doing this on an iOS app at the moment. I need to double check that it's not rendering when doing the transformations...
• truongnm: <input type="submit" style="visibility:hidden;position:absolute"/>

Answer 2

If there are more than one inputs and you want to hide the submit, the best seems:

<input type="submit" style="visibility:hidden;position:absolute"/>

• sidonaldson: Nice solution. Visibility: hidden makes the it not render the item and position absolute hides it but keep it within the page bounds!
• Alex Schröder: There's a typo: visibility instead of visiblity.

Answer 3

You can also bind a keypress listener to the element or form. The iphone "Go" button is the same as the enter button on a computer, char 13.

$('someElem').bind("keypress", function(e){
 // 'Go' key code is 13
 if (e.which === 13) {
 console.log("user pressed Go");
 // submit your form with explicit JS.
 } 
 });

Answer 4

I could not work out why a very simple google maps form was not submitting using the iPhone Go button.

Turns out, after stripping it down, it does not work with target="_blank" on the form tag.

Removed that, and now the Go button works on iPhone.

Here's a JSFiddle to try it

• mike: I was about to say, that's silly, why would you ever have that on a form element, then I noticed, that was exactly my issue. I had copy/pasted a form from Mailchimp and it had that attribute on it.

Answer 5

The code given by the others is correct. If you are using jQuery Mobile then add

data-role="none" 

to the submit input element. Like so:

<input type="submit" data-role="none" style="visibility: hidden; position: absolute;" />

Answer 6

As of writing (11/19/2019), on iOS 13.1.3, the following scenarios change the return key label:

• The INPUT element must be wrapped in a FORM element, and the FORM element must have an action attribute. (It can be an empty string, i.e. action="".)
• If the INPUT element has a type of search, the return key have a label of search.
• Any other value for the type attribute will result in the return key having a label of go.

The presence of an INPUT or BUTTON element with a type set to submit does not appear to affect the return key label. (Though it's a good idea to include one for accessibility purposes.)

Answer 7

Just enclosing my input type='search' in a form tag did the trick when I encountered this problem. Hopefully it might help others that had this problem as well.

• DA.: It appears a form with only one input field WILL submit automatically with the GO button...but not if there is more than one input field in the form.

Answer 8

Here's the submit button style that worked for me, with minimum side-effects on the page:

.... style="width: 0px ; height: 0px" ....

Answer 9

GO button to submit is a default behaviour of iOS and don`t try to hack the keyboard because UIKeyboard is runtime header, however you can inject JS for your html in runtime and prevent GO button behaviour (GO acts like a Enter key),

Try this,

 WKWebView *webView; 
 WKUserContentController *contentController = [[WKUserContentController alloc] init];
 NSString *script1 = @"var isEnter = false;";
 WKUserScript *userScript1 = [[WKUserScript alloc] initWithSource:script1 injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:false];
 [contentController addUserScript:userScript1];
 NSString *script2 = @"function captureGoKey(e){if(isEnter){e.preventDefault();}isEnter = false;}";
 WKUserScript *userScript2 = [[WKUserScript alloc] initWithSource:script2 injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:false];
 [contentController addUserScript:userScript2];
 NSString *script3 = @"var form = document.getElementsByTagName('form')[0];";
 WKUserScript *userScript3 = [[WKUserScript alloc] initWithSource:script3 injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:false];
 [contentController addUserScript:userScript3];
 NSString *script4 = @"document.onkeypress = function(e){if(e.keyCode == 13){isEnter = true;}}";
 WKUserScript *userScript4 = [[WKUserScript alloc] initWithSource:script4 injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:false];
 [contentController addUserScript:userScript4];
 NSString *script5 = @"if(form.attachEvent){form.attachEvent('submit', captureGoKey);}else{form.addEventListener('submit', captureGoKey);}";
 WKUserScript *userScript5 = [[WKUserScript alloc] initWithSource:script5 injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:false];
 [contentController addUserScript:userScript5];
 WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
 config.userContentController = contentController;
 webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];