僅在單擊提交按鈕時提交表單並阻止“輸入”提交表單

Question

我想阻止用戶在點擊進入時提交表單。

這適用於此

$(document).ready(function() {
        $(window).keydown(function(event){
            if(event.keyCode == 13) {
                event.preventDefault();
                return false;
            }
        });
    });

但是我在頁面上有其他按鈕，當我選中並單擊Enter以獲取其功能時，這將通過此功能被阻止。

按鈕如下：

<input type='button' tabindex="29" value='Add Additional Drug' id='addButton'>

並且我只想在選擇提交按鈕時按下后提交表單。

<input type="submit" name="submit" value="Submit" tabindex="40" class="submit"/>

我該怎么做？

編輯

我在附加的Stackoverflow中看到了答案，但如果他們已經完成了所有字段，他允許人們按Enter鍵：

我不希望用戶按Enter鍵，除非他們選擇了一個按鈕（即不能按Enter鍵，按Tab鍵，按Enter鍵，這將觸發按鈕執行其功能而不提交表單。

表單以Tabbing為基礎，因此用戶將選中所有字段。

Answer 1

將keydown事件綁定到整個文檔將影響頁面上的所有輸入和表單，您的頁面中可能有幾個輸入和表單，因此它會弄亂整個頁面邏輯。

您可以將其綁定到特定表單：

$("#myForm input").not("#addButton").keydown(function(event) {
    if (event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
});

演示：

 $("#myForm input").not("#addButton").keydown(function(event) { if (event.keyCode == 13) { event.preventDefault(); return false; } }); 

 form input { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="" id="myForm"> <input type="text" name="input1" /> <input type="text" name="input2" /> <input type="text" name="input3" /> <input type="submit" name="submit" value="Submit" tabindex="3" class="submit" /> </form> 

注意：

• 我在這里使用#myForm作為測試id來定位頁面中的特定表單，您只需要使用表單ID。
• 在.not("#addButton")使用jQuery .not（）方法不會影響id="addButton"的按鈕。

Answer 2

首先，請記住，您嘗試的內容會破壞UI可訪問性標准。

考慮到這一點，您需要停止使用真正的“提交”按鈕並使用模擬提交按鈕的常規按鈕。

接下來，您需要通過代碼手動觸發所有非提交按鈕按鈕的click事件。

這是一個有效的例子。 有關詳細信息，請參閱注釋

 $(document).ready(function() { $(window).on("keydown", function(event){ // Check to see if ENTER was pressed and the submit button was active or not if(event.keyCode === 13 && event.target === document.getElementById("btnSubmit")) { // It was, so submit the form document.querySelector("form").submit(); } else if(event.keyCode === 13 && event.target !== document.getElementById("btnSubmit") ){ // ENTER was pressed, but not while the submit button was active alert("Enter pressed on something other than submit button."); // Cancel form's submit event event.preventDefault(); // Invoke click event of target so that non-form submit behaviors will work event.target.click(); // Tell JQuery to cancel the event return false; } }); // Non-submit button event handling $("#btnOther").on("click", function(){ alert("Other button clicked!"); }); // Set up your "regular" button to act as a "submit" button when it is clicked $("#btnSubmit").on("click", function(){ // Submit the form document.querySelector("form").submit(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action=# method=post> <input name=test> <input type=button id="btnOther" value="Other Button"> <input type=button id="btnSubmit" value=Submit> </form>