如何防止 iPad/iPhone 上的 Go 按钮发布表单 [英] How can I prevent the Go button on iPad/iPhone from posting the form

问题描述

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

I have a dynamic form that is to be displayed using an iPad.

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

This form has a couple of radio buttons and some text fields and one submit button.

在 iPad 中，虚拟键盘 GO 按钮应该作为回车键，导致点击表单中的第一个提交按钮并发布表单.

In an iPad the virtual keyboard GO button is supposed to act ad the enter key, causing the first submit button in the form to be clicked and the form to be posted.

为了避免在表单完成之前过多的非自愿发布，我们在表单的更高位置添加了一个额外的提交按钮，绝对位于可见区域之外的 onclick="return false;".这会劫持回车键，防止在除 Safari Mobile 之外的所有浏览器中意外发布.

To avoid excessive involuntary postings before the form is complete we added an extra submit button higher up in the form, absolutely positioned outside of the visible area with onclick="return false;". This hijacks the enter keystroke preventing accidental posting in every browser except Safari Mobile.

我们甚至在 iPad 上测试了 Opera 移动版，它按预期工作.

On an iPad we even tested Opera mobile and it works as expected.

但 Safari Mobile 显然忽略了返回 false，因为单击按钮的事件会导致其他浏览器无法发布的帖子，甚至 PC 上的 safari 也没有.

But Safari Mobile apparently ignores the return false since event clicking the button causes a post that no other browser does, not even safari on PC.

我的问题是

1: 为什么 safari mobile 在提交时忽略return false"，这里是否还有其他机制在起作用?

1: Why is safari mobile ignoring "return false" on submit, is there an other mechanism at play here?

2:如何在单击开始"时阻止 Safari 移动版发布表单?

2: How can I stop Safari mobile from posting the form when clicking GO?

我在 Google 和 Stackoverflow 上进行了大量搜索并找到了许多示例，但所有示例都需要大量的 javascript 和事件绑定，并且表单的动态特性以及用户生成的内容使得此错误容易发生且非常复杂，因为几乎所有必需的绑定事件到每个文本框和文本区域.

I have made numerous searches on Google and Stackoverflow and found many examples but all requires a lot of javascript and event binding and the dynamic nature of the form along with user generated content makes this error prone and pretty complex since almost all required binding events to every textbox and textarea.

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

Any solution that works is good but the simpler the better, especially if it does not require to much customization of the form or events that might conflict with autocomplete or validation events.

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

推荐答案

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

I found a solution to my problem.

问题的根源在于 Safari 移动版忽略按钮上的 onsubmit="return false"，它仅适用于表单.

The base to the problem is that Safari mobile ignores onsubmit="return false" on buttons, it only works on forms.

设置 onsubmit="return false;"在表单上，​​制作一个普通按钮(不提交)并设置 onclick="form.submit()".

Setting onsubmit="return false;" on the form, making a normal button (not submit) and setting 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;" 它不会发布.

The Go button does not trigger a normal button, only submit buttons. Since the form has onsubmit="return false;" it will not post.

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

The button on the other hand, when clicked triggers the onclick="form.submit();" which overrides the onsubmit on the form.

这个解决方案似乎可以在任何浏览器中可靠地工作.

This solution seems to work in any browser reliably.

这篇关于如何防止 iPad/iPhone 上的 Go 按钮发布表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！