如何防止iPad/iPhone上的Go按鈕發佈表格

我有一個要用iPad顯示的動態表格。如何防止iPad/iPhone上的Go按鈕發佈表格

此表單有幾個單選按鈕和一些文本字段以及一個提交按鈕。

在iPad上的虛擬鍵盤GO按鈕應該作用廣告回車鍵，導致被點擊的形式和形式先提交按鈕來發布。

爲了避免過多的不隨意張貼之前的形式完成我們的形式增加了額外的提交按鈕上漲，絕對定位的onclick =可見區域外的「返回false;」。這劫持了輸入按鍵，防止在Safari Mobile以外的每個瀏覽器中發生意外發布。

在iPad上，我們甚至測試了Opera移動設備，並且按預期工作。

但移動Safari瀏覽器顯然忽略返回false，因爲事件單擊該按鈕後，沒有其他的瀏覽器，甚至沒有在PC上的Safari。

我的問題是

1：爲什麼Safari瀏覽器的移動無視提交「返回false」，是否有其他的機制在發揮作用嗎？

2：點擊GO後，如何阻止Safari移動發佈表單？

我已經在谷歌和Stackoverflow上進行了大量搜索，發現了很多例子，但都需要大量的javascript和事件綁定，並且表單的動態性質以及用戶生成的內容使得這個錯誤容易發生，並且相當複雜，因爲幾乎所有的綁定事件到每個文本框和textarea。

，工程的任何解決方案是好的，但越簡單越好，尤其是如果它不要求可能與自動完成或驗證事件衝突的形式或事件的多少定製。

例testpage：http://lab.dnet.nu/ipad.php

來源

2012-03-08 David Mårtensson

我找到了解決我的問題。

基礎的問題是，Safari瀏覽器的移動忽略的onsubmit = ON按鍵「返回false」，它僅適用於形式。

設置onsubmit =「return false;」在窗體上，製作一個正常的按鈕（不提交）並設置onclick =「form.submit（）」。

Ex。

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

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

Go按鈕不觸發正常按鈕，只提交按鈕。由於表格有onsubmit="return false;"它不會發布。

在另一方面，按鈕，點擊時觸發它覆蓋的形式對onsubmit的onclick="form.submit();"。

此解決方案似乎可以在任何瀏覽器中可靠地工作。

來源

2012-03-20 17:03:29

+1絕對沒有看到這一切。謝謝 – 2013-04-03 03:34:09

似乎非常傳統，因爲這基本上打破了普通UX和預期的設備行爲。

但是，我認爲提及此解決方案依賴於實際的<form> DOM元素也很重要。這意味着按鈕上的onclick處理程序不應該使用jQuery對象來提交，而是使用DOM元素。

jQuery對象。不工作：

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

DOM元素。工作原理：

沒有jQuery的。工作原理：

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

而且，這裏是一個類似的方法，使用jQuery的到攔截鍵盤提交和只允許點擊一個按鈕。信貸到@levi：http://jsfiddle.net/RsKc7/

來源

2013-06-25 03:40:21

那麼，由於服務器（CMS）中的plattform約束，jQuery不是這種情況下的選項。而關於打破預期的行爲，好吧，在這種情況下，ipad被用作infoboot，路人可以回答表單，任何一個不習慣ipad的人都會發現，當他們試圖做的所有事情發佈時，關閉鍵盤以進入下一個領域。 – 2013-06-25 09:57:27

另外，如前所述，safari mobile的「行爲」與我們在android和windows pads上測試的所有其他移動瀏覽器不同;）因此，在我們看來，它的Ipad方式是意想不到的，而不是170個使用過該表單對我們的解決方案有任何意見：D – 2013-06-25 10:01:13

這是一個額外的答案，以防萬一有人像我這樣追逐這個問題。

假設你使用jQuery，下面的代碼片段應該防止「Go」按鈕觸發表單提交（至少它在Nexus 7的Android 4.2.2上的Chrome; YMMMV）。另外，請注意，如果您希望允許「Enter」鍵在下面的任何輸入類型上工作，這將防止發生這種情況。

$(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; 
     } 
    });

編輯：看來this bug斷裂在Chrome中的Android> 4.3 keyup/，在這種情況下，該修補程序將不再在某些情況下工作。

來源

2013-08-06 17:37:18 ajm

更好的答案是這樣的。另一個不允許你使用常規的提交按鈕。這隻會攻擊go按鈕。

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

來源

2014-09-10 21:40:23

這將使文本框元素變爲無法輸入換行符。此外，它不會侷限於目前的形式，但會影響所有可能不是您想要的形式，但是，在大多數情況下，它至少可以起作用。 – 2014-09-12 07:34:33

-1

移動觸摸屏鍵盤上的按鈕和返回按鈕會觸發第一個提交按鈕的onclick事件。如果要判斷它的用戶或腳本點擊按鈕，你可以使用以下命令：

$('#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; 
 
    } 
 
}

來源

2016-04-01 08:10:07

如何防止iPad/iPhone上的Go按鈕發佈表格

回答

相關問題