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

问题描述

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

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

在iPad中，虚拟键盘GO按钮应用于输入键，导致表单中的第一个提交按钮被点击并发布表单。 / p>

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

在iPad上，我们甚至测试了Opera移动设备，并且按预期工作。 p>

但Safari Mobile显然忽略了返回错误，因为点击该按钮会导致其他浏览器无法发布的帖子，甚至没有在PC上的Safari浏览器。

我的问题是

1：为什么Safari浏览器会忽略返回false提交，是否有其他机制在这里玩？

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

我在Google和Stackoverflow上进行了大量搜索，发现很多示例，但都需要大量的JavaScript和事件绑定，并且表单的动态性质以及用户生成的内容这个错误很容易发生，而且相当复杂，因为几乎所有的文本框和textarea都需要绑定事件。

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

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

解决方案

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

Safari移动版忽略了按钮上的onsubmit =return false，它仅适用于表单。

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

例子

 < form method =postonsubmit =return false;> 
 ... //此处的其他字段
 
< input type =buttonvalue =发送onclick =form.submit（）; /> 
< / form> 
  

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

按钮另一方面，点击触发 onclick =form.submit（）;，它将覆盖表单上的onsubmit。

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

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.

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.

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.

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

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.

My questions are

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

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

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.

Example testpage: http://lab.dnet.nu/ipad.php

解决方案

I found a solution to my problem.

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

Setting onsubmit="return false;" on the form, making a normal button (not submit) and setting onclick="form.submit()".

Ex.

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

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

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

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屋！