javascript - 仅当提交按钮被点击时才提交表单并阻止 "Enter"提交表单

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 为基础工作，因此用户将在所有字段上使用 tab 键。

Answer 1

将 keydown 事件绑定(bind)到整个文档将影响页面上的所有输入和表单，您的页面中可能有多个输入和表单，因此它会打乱整个页面逻辑。

您可以将它绑定(bind)到一个特定的表单:

$("#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。
• 使用 jQuery .not() .not("#addButton") 中的方法不会影响带有 id="addButton" 的按钮。