blocks|key|237032|text|我找到了解决我的问题的办法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|237033|这个问题的基础是Safari+mobile忽略了按钮上的onsubmit="return+false“，它只适用于表单。|237034|在表单上设置onsubmit="return+false;“，制作一个普通按钮(不是submit)，并设置onclick="form.submit()”。|237035|例如。|237036|<form+method="post"+onsubmit="return+false;">
++++...+//Other+fields+here

++++<input+type="button"+value="Send"+onclick="form.submit();"+/>
</form>|code-block|syntax|javascript|237037|Go按钮不会触发普通按钮，只能触发submit按钮。因为表单有onsubmit="return+false;"，所以它不会发布。|offset|length|style|CODE|237038|另一方面，当单击该按钮时，它会触发onclick="form.submit();"，从而覆盖表单上的onsubmit。|237039|这个解决方案似乎可以在任何浏览器中可靠地工作。|237040|entityMap^0|0|0|0|0|0|V|O|0|H|O|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|12|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|13|8|@$O|14|P|15|Q|R]]|9|@]|A|$]]|$1|S|3|T|5|6|7|16|8|@$O|17|P|18|Q|R]]|9|@]|A|$]]|$1|U|3|V|5|6|7|19|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|X|$]]

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.

<pre><code>&lt;form method="post" onsubmit="return false;"&gt;
 ... //Other fields here

 &lt;input type="button" value="Send" onclick="form.submit();" /&gt;
&lt;/form&gt;
</code></pre>

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

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

This solution seems to work in any browser reliably.

blocks|key|3114760|text|这似乎非常不合常规，因为这基本上破坏了一般的UX和预期的设备行为。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3114761|但是，我认为还需要指出的是，此解决方案依赖于实际的<form>+DOM元素。这意味着按钮上的onclick处理程序不应该使用jQuery对象来提交，而应该使用DOM元素。|offset|length|style|CODE|3114762|jQuery对象。不起作用：|BOLD|3114763|<input+type="button"+value="Send"+onclick="$("#myform").submit();"+/>|code-block|syntax|javascript|3114764|DOM元素。作品：|3114765|<input+type="button"+value="Send"+onclick="$("#myform").get(0).submit();"+/>|3114766|不带jQuery的。作品：|3114767|<input+type="button"+value="Send"+onclick="document.getElementById('myform').submit();"+/>|3114768|3114769|此外，还有一种类似的方法，使用jQuery拦截键盘提交，只允许单击按钮。功劳归于@levi：http://jsfiddle.net/RsKc7/|3114770|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/RsKc7/^0|0|P|6|1A|7|0|0|E|0|0|0|9|0|0|9|4|0|0|0|F|6|1A|Q|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|19|8|@$D|1A|E|1B|F|G]|$D|1C|E|1D|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1E|8|@$D|1F|E|1G|F|J]]|9|@]|A|$]]|$1|K|3|L|5|M|7|1H|8|@]|9|@]|A|$N|O]]|$1|P|3|Q|5|6|7|1I|8|@$D|1J|E|1K|F|J]]|9|@]|A|$]]|$1|R|3|S|5|M|7|1L|8|@]|9|@]|A|$N|O]]|$1|T|3|U|5|6|7|1M|8|@$D|1N|E|1O|F|J]]|9|@]|A|$]]|$1|V|3|W|5|M|7|1P|8|@]|9|@]|A|$N|O]]|$1|X|3|-4|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1R|8|@$D|1S|E|1T|F|J]]|9|@$D|1U|E|1V|1|1W]]|A|$]]|$1|10|3|-4|5|6|7|1X|8|@]|9|@]|A|$]]]|11|$12|$5|13|14|15|A|$16|17]]]]

Seems very unconventional, as this basically breaks general UX and expected device behaviour.

However, I think it also important to mention that this solution relies on the actual <code>&lt;form&gt;</code> DOM element. Meaning the <code>onclick</code> handler on the button should not use a jQuery object to submit but the DOM element.

jQuery object. Does not work:

<pre><code>&lt;input type="button" value="Send" onclick="$("#myform").submit();" /&gt;
</code></pre>

DOM element. Works:

<pre><code>&lt;input type="button" value="Send" onclick="$("#myform").get(0).submit();" /&gt;
</code></pre>

Without jQuery. Works:

<pre><code>&lt;input type="button" value="Send" onclick="document.getElementById('myform').submit();" /&gt;
</code></pre>

<hr>

Also, here is a similar approach, using jQuery to intercept keyboard submits and only allowing clicks on a button. Credit goes to @levi: <a href="http://jsfiddle.net/RsKc7/" rel="nofollow">http://jsfiddle.net/RsKc7/</a>

blocks|key|238803|text|这里有一个额外的答案，以防有人像我一样追查这个问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|238804|假设你使用的是jQuery，下面的代码片段应该会阻止"Go“按钮触发表单提交(至少在Nexus7的Chrome+on+Android4.2.2上是这样)。此外，请注意，如果您希望允许"Enter“键在下面的任何输入类型上工作，这将防止发生这种情况。|238805|$(document.body).on('keydown',+'input:text,+input[type=password],+input[type=email]',+++++
++++function+(e)+{+
++++++++//+Android+maps+the+"Go"+button+to+the+Enter+key+=>+key+code+13
++++++++if+(e.keyCode+==+13)+{
++++++++++++return+false;+
++++++++}
++++});|code-block|syntax|javascript|238806|编辑:似乎this+bug在安卓4.3版的Chrome中破坏了keyup/keydown，在这种情况下，这个修复在某些情况下将不再有效。|offset|length|style|CODE|238807|entityMap|0|LINK|mutability|MUTABLE|url|https://code.google.com/p/chromium/issues/detail?id=118639^0|0|0|0|V|5|11|7|5|8|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Z|8|@$K|10|L|11|M|N]|$K|12|L|13|M|N]]|9|@$K|14|L|15|1|16]]|A|$]]|$1|O|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

Here's an additional answer, in case anyone winds up chasing this issue like I did.

Provided you're using jQuery, the following snippet should prevent the "Go" button from triggering a form submission (at least it does on Nexus 7's Chrome on Android 4.2.2; YMMMV). Also, note that if you want to allow the "Enter" key to work on any of the input types below, this will prevent that from happening.

<pre><code>$(document.body).on('keydown', 'input:text, input[type=password], input[type=email]', 
 function (e) { 
 // Android maps the "Go" button to the Enter key =&gt; key code 13
 if (e.keyCode == 13) {
 return false; 
 }
 });
</code></pre>

Edit: It seems <a href="https://code.google.com/p/chromium/issues/detail?id=118639" rel="nofollow">this bug</a> breaks <code>keyup</code>/<code>keydown</code> in Chrome in Android > 4.3, in which case this fix will no longer work in some circumstances.

blocks|key|237067|text|更好的答案是这样的。另一个不允许使用常规的提交按钮。这只会攻击go按钮。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|237068|$("body").keydown(function(){
++++if(event.keyCode+==+13)+{
++++++++document.activeElement.blur();
++++++++return+false;
++++}
});|code-block|syntax|javascript|237069|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Better answer is this. The other does not allow you to use a regular submit button. This attacks just the go button.

<pre><code>$("body").keydown(function(){
 if(event.keyCode == 13) {
 document.activeElement.blur();
 return false;
 }
});
</code></pre>

blocks|key|238835|text|移动触摸屏键盘上的Go按钮和return按钮会触发第一个submit按钮的onclick事件。要确定单击该按钮的是用户还是脚本，可以使用以下命令：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|238836|​|238837|$('#mybuttonId').onclick(e)+{
++if+(e.screenX+&&+e.screenX+!=+0+&&+e.screenY+&&+e.screenY+!=+0)+{
++++//This+is+the+user+clicking+on+the+button.
++}+else+{
++++//This+is+not+the+user,+but+a+script+,+do+nothing.
++++return+false;
++}
}|code-block|syntax|javascript|238838|238839|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

Go buttons and return buttons on mobile touch screen keyboards trigger the onclick event of your first submit button. To determine if its the user or script clicking the button, you can use the following: 

<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('#mybuttonId').onclick(e) {
 if (e.screenX &amp;&amp; e.screenX != 0 &amp;&amp; e.screenY &amp;&amp; e.screenY != 0) {
 //This is the user clicking on the button.
 } else {
 //This is not the user, but a script , do nothing.
 return false;
 }
}</code></pre>
</div>
</div>

blocks|key|2900696|text|不能评论，所以我必须放一条新的消息。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2900697|如果我们使用“输入类型按钮”，@David解决方案工作得很好；相反，David+fix似乎无法解决我们使用按钮标记时的问题。|offset|length|style|BOLD|2900698|(环境:+cordova、ipad+mini+2)|2900699|谢谢，大卫！|2900700|entityMap^0|0|1N|3|0|0|P|0|0|6|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@$D|P|E|Q|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|R|8|@$D|S|E|T|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|U|8|@$D|V|E|W|F|G]]|9|@]|A|$]]|$1|L|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|M|$]]

Cannot comment so i have to put a new message. 

@David solution works fine if we are using an "input type button"; instead, if we are using a button tag doesn't seems to be solved by David fix. 

(env: cordova, ipad mini 2) 

Thanks David!

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: <a href="http://lab.dnet.nu/ipad.php">http://lab.dnet.nu/ipad.php</a>

How can I prevent the Go button on iPad/iPhone from posting the form

Android

jQuery

我有一个要使用iPad显示的动态表单。该表单有两个单选按钮、一些文本字段和一个提交按钮。在iPad中，虚拟键盘上的GO按钮应该起到enter键的作用，导致表单中的第一个submit按钮被单击并发布表单。为了避免在表单完成之前出现过多的非自愿投递，我们在表单的上方添加了一个额外的提交按钮，该按钮绝对位于可见区域之外，并带...

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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