按 Enter 始终提交表单答案

【问题标题】：Pressing Enter Always Submits Form按 Enter 始终提交表单
【发布时间】：2012-01-05 21:55:00
【问题描述】：

我的页面上有一个简单的文本框和按钮类型输入。

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

我使用 jQuery 捕获按钮点击。

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

      ...do Stuff  

  });

只要我手动单击按钮，上面的代码就可以正常工作。当我想使用“enter”键单击按钮时，我开始遇到问题。无论我做什么，我都无法阻止回车键执行它的默认提交功能。

我做的第一件事是将输入类型从“提交”更改为“按钮”。

我尝试将表单的 onsubmit 设置为 onsubmit="return false;"

我尝试使用 jQuery 来捕获回车键事件：

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

每次我按回车键，就像我在提交表单一样，整个页面都会刷新。上面的 jQuery 代码确实捕获了“enter”键击，但表单仍然提交并刷新页面。

我不知道发生了什么。

【问题讨论】：

标签： javascript jquery html forms

【解决方案1】：

您需要取消该操作。

event.preventDefault();

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

【讨论】：

除了添加“event.preventDefault()”之外，我还必须将“keyup”更改为“keypress”，keyup 或 keydown 都不起作用。谢谢！
似乎保持输入键检查和按钮作为按钮类型而不是将其切换回提交使用了很多额外的代码。

【解决方案2】：

Epascarello 是对的，你需要用他给你的代码取消提交。但是您还应该将按钮更改回提交类型，以便 ENTER 键和单击按钮执行相同的操作。这样你只需要在一个区域处理提交的取消。

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

JQuery:

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

      event.preventDefault();
      ...do Stuff  

  });

这样一个函数可以处理 ENTER 键和按钮单击。

编辑：将 event.preventDefault() 作为第一条语句。

【讨论】：