Html 获取 iPhone GO 按钮以提交表单

Getting iPhone GO button to submit form

提问by DA.

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

有没有人知道哪些变量会进入表单以使 iPhone 虚拟键盘的 GO 按钮提交表单而不是提交表单？

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.

• 如果 FORM 只有一个用户输入字段，则 go 按钮会自动提交表单

• 如果 FORM 有多个用户输入字段，但没有 INPUT TYPE="SUBMIT"，则 GO 按钮不会提交表单。

• 如果 FORM 有多个用户输入字段并且有一个 INPUT TYPE="SUBMIT" 那么 go 按钮确实提交了表单。

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?

有没有人知道进入 GO 按钮工作与不工作的其他因素？

回答by DA.

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).

我们有一个包含多个用户输入字段的表单，但不是真的<input type="submit">（它是通过 JS 提交的）。

As such, the GO button did nothing.

因此，GO 按钮什么也没做。

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

然后我们添加了一个<input type="submit">并将其设置为display: none希望可以解决问题。不。没用。

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

一时兴起，我们将 display: none 改为 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.

显然，Safari 正在寻找表单中是否存在 SUBMIT 按钮，并且只有当它没有显示时：none，当您点击 GO 按钮时它才会触发它。

回答by Jiri Kopsa

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"/>

回答by David Merritt

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.

您还可以将按键侦听器绑定到元素或表单。iphone的“Go”按钮与电脑上的回车按钮相同，字符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.
    } 
 });

回答by Nathan Todd

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

我不明白为什么一个非常简单的谷歌地图表单没有使用 iPhone Go 按钮提交。

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

事实证明，将其剥离后，它不适target="_blank"用于表单标签。

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

删除了它，现在 Go 按钮可以在 iPhone 上使用了。

Here's a JSFiddleto try it

这是一个可以尝试的JSFiddle

回答by Jonny Forney

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

其他人给出的代码是正确的。如果您使用的是 jQuery Mobile，则添加

data-role="none" 

to the submit input element. Like so:

到提交输入元素。像这样：

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

回答by Sachintha Udara

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),

GO 按钮提交是 iOS 的默认行为，不要尝试破解键盘，因为 UIKeyboard 是运行时标头，但是您可以在运行时为 html 注入 JS 并防止 GO 按钮行为（GO 行为类似于 Enter 键），

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];

回答by Tim Hettler

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

在撰写本文时 (11/19/2019)，在 iOS 13.1.3 上，以下场景会更改return键标签：

• The INPUTelement must be wrapped in a FORMelement, and the FORMelement must have an actionattribute. (It can be an empty string, i.e. action="".)
• If the INPUTelement has a typeof search, the return key have a label of search.
• Any other value for the typeattribute will result in the return key having a label of go.

• 的INPUT元件必须被包裹在一个FORM元件，该FORM元件必须有一个action属性。（它可以是一个空字符串，即action="".）
• 如果INPUT元素具有typeof search，则返回键的标签为search。
• 该type属性的任何其他值都将导致返回键的标签为go。

The presence of an INPUTor BUTTONelement with a typeset to submitdoes not appear to affect the return key label. (Though it's a good idea to include one for accessibility purposes.)

设置为 to的INPUTorBUTTON元素的存在似乎不会影响返回键标签。（尽管出于可访问性目的而包含一个是个好主意。）typesubmit

回答by pragman

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

这是对我有用的提交按钮样式，页面上的副作用最小：

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

回答by Oz Lodriguez

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.

当我遇到这个问题时，只需将我的 input type='search' 包含在一个表单标签中就可以了。希望它也可以帮助其他遇到此问题的人。