[ACCEPTED]-Getting iPhone GO button to submit form-keyboard
So, here was our specific issue:
We had a 10 form with multiple user input fields, but 9 not a true <input type="submit">
(it was being submitted via 8 JS).
As such, the GO button did nothing.
We 7 then added an <input type="submit">
and set it to display: none
hoping that 6 would do the trick. Nope. Didn't work.
On 5 a whim, we changed display: none to margin-left: -1000px
That 4 worked!
Apparently, Safari is looking for 3 the presence of a SUBMIT button in the form 2 and only if it's not display: none, it will 1 then fire it when you hit the GO button.
If there are more than one inputs and you 1 want to hide the submit, the best seems:
<input type="submit" style="visibility:hidden;position:absolute"/>
You can also bind a keypress listener to 3 the element or form. The iphone "Go" button 2 is the same as the enter button on a computer, char 1 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.
}
});
I could not work out why a very simple google 5 maps form was not submitting using the iPhone 4 Go button.
Turns out, after stripping it 3 down, it does not work with target="_blank"
on the form 2 tag.
Removed that, and now the Go button 1 works on iPhone.
Here's a JSFiddle to try it
The code given by the others is correct. If 2 you are using jQuery Mobile then add
data-role="none"
to 1 the submit input element. Like so:
<input type="submit" data-role="none" style="visibility: hidden; position: absolute;" />
As of writing (11/19/2019), on iOS 13.1.3, the 5 following scenarios change the return
key label:
- The
INPUT
element must be wrapped in aFORM
element, and theFORM
element must have anaction
attribute. (It can be an empty string, i.e.action=""
.) - If the
INPUT
element has atype
ofsearch
, the return key have a label ofsearch
. - Any other value for the
type
attribute will result in the return key having a label ofgo
.
The 4 presence of an INPUT
or BUTTON
element with a type
set 3 to submit
does not appear to affect the return 2 key label. (Though it's a good idea to include 1 one for accessibility purposes.)
Just enclosing my input type='search' in 3 a form tag did the trick when I encountered 2 this problem. Hopefully it might help others 1 that had this problem as well.
Here's the submit button style that worked 2 for me, with minimum side-effects on the 1 page:
.... style="width: 0px ; height: 0px" ....
GO button to submit is a default behaviour 5 of iOS and don`t try to hack the keyboard 4 because UIKeyboard is runtime header, however 3 you can inject JS for your html in runtime 2 and prevent GO button behaviour (GO acts 1 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];
More Related questions
We use cookies to improve the performance of the site. By staying on our site, you agree to the terms of use of cookies.