如何阻止iPad/iPhone上的Go按钮发布表单
我有一个要使用iPad显示的动态表单。
该表单有两个单选按钮、一些文本字段和一个提交按钮。
在iPad中，虚拟键盘上的GO按钮应该起到enter键的作用，导致表单中的第一个submit按钮被单击并发布表单。
为了避免在表单完成之前出现过多的非自愿投递，我们在表单的上方添加了一个额外的提交按钮，该按钮绝对位于可见区域之外，并带有onclick="return false;“。这劫持了回车按键，防止在除Safari Mobile之外的每个浏览器中意外发帖。
在iPad上，我们甚至测试了Opera移动端，它的运行情况和预期的一样。
但Safari Mobile显然忽略了返回false，因为单击该按钮的事件会导致post，而其他浏览器都不会这样做，甚至PC上的safari也不会。
我的问题是
1:为什么safari mobile在提交时忽略了"return false“，这里有没有其他机制在起作用？
2:如何才能阻止Safari mobile在单击GO时发布表单？
我在Google和Stackoverflow上进行了无数次搜索，找到了很多例子，但都需要大量的javascript和事件绑定，表单的动态性质以及用户生成的内容使得这个错误很容易发生，而且相当复杂，因为几乎所有的绑定事件都需要绑定到每个文本框和文本区域。
任何有效的解决方案都是好的，但越简单越好，特别是如果它不需要对可能与自动完成或验证事件冲突的表单或事件进行太多自定义。
示例测试页面：http://lab.dnet.nu/ipad.php
回答 6
Stack Overflow用户
发布于 2012-03-21 01:03:29
我找到了解决我的问题的办法。
这个问题的基础是Safari mobile忽略了按钮上的onsubmit="return false“，它只适用于表单。
在表单上设置onsubmit="return false;“，制作一个普通按钮(不是submit)，并设置onclick="form.submit()”。
例如。
<form method="post" onsubmit="return false;">
... //Other fields here
<input type="button" value="Send" onclick="form.submit();" />
</form>Go按钮不会触发普通按钮，只能触发submit按钮。因为表单有onsubmit="return false;"，所以它不会发布。
另一方面，当单击该按钮时，它会触发onclick="form.submit();"，从而覆盖表单上的onsubmit。
这个解决方案似乎可以在任何浏览器中可靠地工作。
Stack Overflow用户
发布于 2014-09-11 05:40:24
更好的答案是这样的。另一个不允许使用常规的提交按钮。这只会攻击go按钮。
$("body").keydown(function(){
if(event.keyCode == 13) {
document.activeElement.blur();
return false;
}
});Stack Overflow用户
发布于 2013-06-25 11:40:22
这似乎非常不合常规，因为这基本上破坏了一般的UX和预期的设备行为。
但是，我认为还需要指出的是，此解决方案依赖于实际的<form> DOM元素。这意味着按钮上的onclick处理程序不应该使用jQuery对象来提交，而应该使用DOM元素。
jQuery对象。不起作用：
<input type="button" value="Send" onclick="$("#myform").submit();" />DOM元素。作品：
<input type="button" value="Send" onclick="$("#myform").get(0).submit();" />不带jQuery的。作品：
<input type="button" value="Send" onclick="document.getElementById('myform').submit();" />此外，还有一种类似的方法，使用jQuery拦截键盘提交，只允许单击按钮。功劳归于@levi：http://jsfiddle.net/RsKc7/
https://stackoverflow.com/questions/9614589
复制相似问题