仅在单击提交按钮时提交表单并防止“输入”提交表单

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 to button，可以按 enter，这将触发按钮执行其功能而不提交表单。

表单以 Tabbing 为基础工作，因此用户将在所有字段上使用 Tab。

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 事件。

这是一个工作示例。有关详细信息，请参阅 cmets：

$(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>