按Enter確認提交表格

我的頁面上有一個簡單的文本框和按鈕類型輸入。按Enter確認提交表格

<input id="sText" type="text" /> 
<input id="sButton" type="button" value="button" />

我使用jQuery捕獲按鈕點擊。

$("[id$=sButton]").click(function() { 

     ...do Stuff 

    });

上面的代碼工作得很好，只要我手動點擊按鈕。當我想用「輸入」鍵點擊按鈕時，我開始遇到問題。無論我做什麼，我都無法阻止Enter鍵執行默認提交功能。

我做的第一件事是將輸入類型從「submit」更改爲「button」。

我試過形式的onsubmit設置爲onsubmit="return false;"

我試着使用jQuery來捕獲進入關鍵事件：

$("#sText").keyup(function (event) { 
     if (event.keyCode == 13) { 
      alert("Enter!"); 
      // $("#sButton").click(); 
     } 
    });

我每次按下回車鍵時，它就像我在提交表格，整個頁面刷新。上面的jQuery代碼確實捕獲了「輸入」按鍵，但表單仍然提交併刷新頁面。

我不確定發生了什麼事。

2012-01-05 SharpBarb

您需要取消操作。

event.preventDefault();

但我相信你只能用keydown殺死表單提交，而不是keyup。

2012-01-05 21:57:15 epascarello

+1對於keydown建議 – 2012-01-05 22:04:39

除了添加「event.preventDefault（）」之外，我還必須將「keyup」更改爲「keypress」，keyup或keydown都不起作用。謝謝！ – SharpBarb 2012-01-05 22:34:45

似乎將輸入鍵檢查和按鈕作爲按鈕類型而不是將其切換回提交使用了大量額外的代碼。 – 2012-01-06 06:37:33

Epascarello是正確的，你需要取消提交與他給你的代碼。但是您也應該將按鈕更改回提交類型，以便ENTER鍵和單擊按鈕執行同樣的操作。這樣你只需要處理在一個區域中取消提交。

<input id="sButton" type="submit" value="Submit" />

JQuery的：

$("#YourFormId").submit(function(event){ 

     event.preventDefault(); 
     ...do Stuff 

    });

這樣一個函數處理ENTER鍵，按一下按鈕。

編輯：把event.preventDefault（）作爲第一條語句。

2012-01-05 22:08:16

回答