【问题标题】:Getting iPhone GO button to submit form获取 iPhone GO 按钮以提交表单
【发布时间】:2011-08-05 15:09:03
【问题描述】:

是否有人知道表单中有哪些变量可以使 iPhone 的虚拟键盘的 GO 按钮提交表单而不是提交表单?

我一直在尝试缩小场景的范围,这就是我发现的:

  • 如果FORM只有一个用户输入框,go按钮自动提交表单

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

  • 如果 FORM 有多个用户输入字段并且有 INPUT TYPE="SUBMIT" 则 go 按钮会提交表单。

但是,这并不完全准确,因为我们遇到了第 3 次不适合我们的情况。

是否有人知道 GO 按钮工作与不工作的其他因素?

【问题讨论】:

  • 额外信息:如果 FORM 有一个 TEXTAREA 字段,并且用户正在输入该字段,则不会显示 GO 按钮。我正在寻找解决方案
  • 你需要有一个动作(可以不指定),其他都不重要。

标签: iphone html forms keyboard


【解决方案1】:

所以,这是我们的具体问题:

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

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

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

一时兴起,我们将 display: none 更改为 margin-left: -1000px

成功了!

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

【讨论】:

  • 我们采用了相同的方法,但我们只是使用 z-index 将其推回并使用一些相对位置的乐趣将其隐藏在我们的图形按钮下,而不是 margin-left。
  • 尝试使用visibilty:hidden; 进行此操作,但显然该按钮随后被绘制在屏幕上但未显示......因此发生并使我的表单变得丑陋。将其设置为 position:absolute;left:-1000px; 也对我有用
  • 当心“屏幕外”技术!使用 css 3d 转换网站(或使用透视等的网站),即使对象未显示在屏幕上,浏览器也会计算它。它会导致性能(甚至是著名的文本缩进:-9999px!)的(巨大)下降。所以我更喜欢 opacity:0/visibility:hidden 解决方案
  • @Grsmto 有趣的一点!事实上,我认为我目前正在 iOS 应用程序上执行此操作。我需要仔细检查它在进行转换时是否没有呈现...
【解决方案2】:

如果有多个输入并且您想隐藏提交,最好的方法是:

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

【讨论】:

  • 不错的解决方案。可见性:隐藏使其不呈现项目,绝对位置隐藏它,但将其保持在页面范围内!
  • 有一个错字:可见性而不是可见性。
【解决方案3】:

您还可以将按键侦听器绑定到元素或表单。 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.
    } 
 });

【讨论】:

    【解决方案4】:

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

    事实证明,在将其剥离后,它不适用于表单标签上的target="_blank"

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

    这里有JSFiddle 来试试

    【讨论】:

    • 我正要说,这太傻了,你为什么要在表单元素上使用它,然后我注意到,这正是我的问题。我从 Mailchimp 复制/粘贴了一个表格,上面有那个属性。
    【解决方案5】:

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

    data-role="none" 
    

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

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

    【讨论】:

      【解决方案6】:

      截至撰写本文时(2019 年 11 月 19 日),在 iOS 13.1.3 上,以下情况会更改 return 键标签:

      • INPUT 元素必须包含在FORM 元素中,FORM 元素必须具有action 属性。 (可以是空字符串,即action=""。)
      • 如果INPUT 元素的typesearch,则返回键的标签为search
      • type 属性的任何其他值都将导致返回键的标签为 go

      type 设置为 submitINPUTBUTTON 元素的存在似乎不会影响返回键标签。 (尽管出于可访问性目的包含一个是个好主意。)

      【讨论】:

        【解决方案7】:

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

        【讨论】:

        • 看起来只有一个输入字段的表单将使用 GO 按钮自动提交...但如果表单中有多个输入字段则不会。
        【解决方案8】:

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

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

        【讨论】:

          【解决方案9】:

          提交 GO 按钮是 iOS 的默认行为,不要尝试破解键盘,因为 UIKeyboard 是运行时标头,但是您可以在运行时为 html 注入 JS 并防止 GO 按钮行为(GO 就像一个 Enter 键),

          试试这个,

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

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2014-04-21
            相关资源
            最近更新 更多