Question

我有一个动态表单，可以使用iPad显示。

此表单包含几个单选按钮和一些文本字段以及一个提交按钮。

在iPad中，虚拟键盘GO按钮应该与输入键一起使用，导致单击表单中的第一个提交按钮并发布表单。

为避免在表单完成之前过多的非自愿发布，我们在表单的最上方添加了一个额外的提交按钮，绝对位于可见区域之外，并使用onclick =“return false;”。这会劫持输入击键，防止在除Safari Mobile之外的每个浏览器中意外发布。

在iPad上我们甚至测试过Opera mobile，它按预期工作。

但Safari Mobile显然忽略了返回false，因为单击按钮的事件会导致其他浏览器无法发布的帖子，甚至不会在PC上进行Safari。

我的问题是

1：为什么safari mobile会在提交时忽略“return false”，还有其他机制在这里发挥作用吗？

2：点击GO后如何阻止Safari移动版发布表单？

我在Google和Stackoverflow上进行了大量搜索，发现了许多示例，但都需要大量的javascript和事件绑定，并且表单的动态性质以及用户生成的内容会使这种错误更加复杂，因为几乎所有必需的绑定事件到每个文本框和textarea。

任何有效的解决方案都很好，但越简单越好，特别是如果它不需要对可能与自动完成或验证事件冲突的表单或事件进行太多自定义。

示例测试页：http://lab.dnet.nu/ipad.php

Answer 1

我找到了解决问题的方法。

问题的根源在于Safari移动设备忽略按钮上的onsubmit =“return false”，它只适用于表单。

设置onsubmit =“return false;”在表单上，制作一个普通按钮（不提交）并设置onclick =“form.submit（）”。

实施例

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

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

Go按钮不会触发正常按钮，只会提交按钮。由于表单有onsubmit="return false;"，因此不会发布。

另一方面，单击按钮会触发onclick="form.submit();"覆盖表单上的onsubmit。

此解决方案似乎可以在任何浏览器中可靠地运行。

Answer 2

更好的答案就是这个。另一个不允许您使用常规提交按钮。这只会攻击go按钮。

$("body").keydown(function(){
    if(event.keyCode == 13) {
        document.activeElement.blur();
        return false;
    }
});

Answer 3

似乎非常传统，因为这基本上打破了一般用户体验和预期的设备行为。

但是，我认为同样重要的是要提到这个解决方案依赖于实际的<form> DOM元素。这意味着按钮上的onclick处理程序不应该使用jQuery对象来提交DOM元素。

jQuery对象。不起作用：

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

DOM元素。工作原理：

<input type="button" value="Send" onclick="$("#myform").get(0).submit();" />

没有jQuery。工作原理：

<input type="button" value="Send" onclick="document.getElementById('myform').submit();" />

此外，这是一种类似的方法，使用 jQuery 拦截键盘提交，只允许点击按钮。归功于@levi：http://jsfiddle.net/RsKc7/

Answer 4

这是一个额外的答案，万一有人像我一样忙着追逐这个问题。

如果你正在使用jQuery，下面的代码片段应该阻止“Go”按钮触发表单提交（至少它在Android 4.2.2上的Nexus 7 Chrome上运行; YMMMV）。另请注意，如果您想允许“Enter”键对下面的任何输入类型起作用，这样可以防止这种情况发生。

$(document.body).on('keydown', 'input:text, input[type=password], input[type=email]',     
    function (e) { 
        // Android maps the "Go" button to the Enter key => key code 13
        if (e.keyCode == 13) {
            return false; 
        }
    });

修改：Android中Chrome浏览器中的this bug似乎中断了keyup / keydown＆gt; 4.3，在这种情况下，此修复程序在某些情况下将不再有效。

Answer 5

无法发表评论所以我必须发新消息。

如果我们使用＆＃34;输入类型按钮＆＃34; @David解决方案正常工作相反，如果我们使用按钮标记似乎不会被David修复解决。

（环境：cordova，ipad mini 2）

谢谢大卫！

Answer 6

移动触摸屏键盘上的按钮和返回按钮会触发第一个提交按钮的onclick事件。要确定用户或脚本是否单击该按钮，您可以使用以下命令：

＆＃13;

$('#mybuttonId').onclick(e) {
  if (e.screenX && e.screenX != 0 && e.screenY && e.screenY != 0) {
    //This is the user clicking on the button.
  } else {
    //This is not the user, but a script , do nothing.
    return false;
  }
}

＆＃13;

如何阻止iPad / iPhone上的Go按钮发布表单

6 个答案: