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

Question

我有一个要使用 iPad 显示的动态表单。

这个表单有几个单选按钮和一些文本字段和一个提交按钮。

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

为了避免在表单完成之前过多的非自愿发布，我们在表单的上方添加了一个额外的提交按钮，绝对位于可见区域之外，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 和事件绑定(bind)，并且表单的动态特性以及用户生成的内容使得这个错误容易发生并且非常复杂，因为几乎所有需要的绑定(bind)事件到每个文本框和文本区域。

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

示例测试页: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。

该解决方案似乎可以在任何浏览器中可靠地工作。