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

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

此表单有两个单选按钮、一些文本字段和一个提交按钮

在iPad中，虚拟键盘上的“GO”按钮应该充当回车键，从而单击表单中的第一个提交按钮并发布表单

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

我们甚至在iPad上测试了Opera mobile，它的工作原理与预期相符

但Safari Mobile显然忽略了返回false，因为事件单击按钮会导致发布其他浏览器都无法做到的帖子，即使是PC上的Safari

我的问题是

1:为什么safari mobile在提交时忽略“return false”，这里还有其他机制吗

2:单击GO时，如何阻止Safari mobile发布表单

我在Google和Stackoverflow上进行了多次搜索，发现了许多示例，但都需要大量javascript和事件绑定，表单的动态特性以及用户生成的内容使得这种错误很容易发生，而且非常复杂，因为几乎所有需要的绑定事件都会绑定到每个textbox和textarea

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

---

示例测试页：

我找到了问题的解决方案

问题的根源在于Safari mobile忽略了按钮上的onsubmit=“return false”，它只适用于表单

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

前

... //这里还有其他领域

Go按钮不会触发普通按钮，只会触发submit按钮。 由于表单具有

onsubmit=“return false；”

，因此它将不会发布

另一方面，单击按钮会触发

onclick=“form.submit（）；”

，它会覆盖表单上的onsubmit

---

此解决方案似乎在任何浏览器中都能可靠地工作。

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

然而，我认为同样重要的是，这个解决方案依赖于实际的

DOM元素。这意味着按钮上的

onclick

处理程序不应该使用jQuery对象来提交，而应该使用DOM元素

jQuery对象。不起作用：

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

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

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

DOM元素。作品：

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

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

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

没有jQuery。作品：

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

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

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

---

---

此外，这里还有一种类似的方法，使用jQuery拦截键盘提交，只允许点击按钮。归功于@levi:

这里还有一个额外的答案，以防有人像我一样追问这个问题

如果您使用的是jQuery，下面的代码段应该可以防止“Go”按钮触发表单提交（至少在Android 4.2.2上的Nexus7的Chrome上是这样）。另外，请注意，如果您希望允许“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>4.3的Chrome中，它似乎会中断

keyup

/

keydown

，在这种情况下，此修复在某些情况下将不再有效。

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

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

---

移动触摸屏键盘上的Go按钮和return按钮触发您的第一个submit按钮的onclick事件。要确定是用户还是脚本单击按钮，可以使用以下命令：

$（'#mybuttonId'）。onclick（e）{
如果（e.screenX&&e.screenX！=0&&e.screenY&&e.screenY！=0）{
//这是用户单击该按钮。
}否则{
//这不是用户，而是一个脚本，什么都不做。
返回false；
}
}

无法评论，因此我必须添加新消息

@如果我们使用“输入类型按钮”，David solution可以很好地工作；相反，如果我们使用按钮标签，David fix似乎无法解决这个问题

（环境：cordova、ipad mini 2）

---

谢谢你，大卫

在这种情况下，由于服务器（CMS）中的平台形式限制，jQuery不是一个选项。关于打破预期的行为，在这个例子中，ipad就像一个信息靴，路人可以在其中回答一个表格，任何不习惯ipad的人都会发现，当他们试图关闭键盘进入下一个字段时，表格被张贴出来，这非常令人不安。另外，正如前面提到的，“行为”safari mobile与我们在android和windows Pad上测试的所有其他移动浏览器不同；）因此，在我们看来，Ipad的方式是出人意料的，170位使用过该表单的人中没有一位对我们的解决方案发表过任何评论：这将使break成为一个文本框元素，从而无法输入换行符。此外，它将不限于当前表单，而是影响所有可能不是您想要的表单，但是的，它在大多数情况下至少也会起作用。a是否提交表单？如果按钮未触发提交，则不会劫持GO，也不会阻止发布。