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

前端之家收集整理的这篇文章主要介绍了表单 – 如何阻止iPad/iPhone上的Go按钮发布表单前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个使用iPad显示的动态表单。

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

在iPad中,虚拟键盘GO按钮应该用于输入密钥,导致点击表单中的第一个提交按钮和要发布的表单。

为了避免在表单完成之前过度的不自愿的贴子,我们在表单中添加了一个额外的提交按钮,绝对位于可见区域之外,并带有onclick =“return false;”。
这个劫持进入击键防止意外发布在除Safari Mobile之外的每个浏览器。

在iPad上,我们甚至测试了Opera mobile,并且按预期的方式工作。

但是Safari Mobile显然忽略了返回false,因为事件点击按钮会导致没有其他浏览器发生的帖子,甚至没有PC上的Safari。

我的问题是

1:为什么safari手机忽略“返回虚假”提交,是否有其他机制在这里玩?

2:点击GO后如何停止Safari手机发布表单?

我在Google和Stackoverflow上进行了大量搜索,发现了很多例子,但都需要大量的JavaScript和事件绑定,并且窗体的动态特性以及用户生成内容使得这个错误很容易复杂,因为几乎所有要求的绑定事件文本框和文本区。

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

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

解决方法

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

问题的基础是Safari手机忽略onsubmit =“返回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。

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

原文链接:https://www.f2er.com/html/233602.html

猜你在找的HTML相关文章