如何捕获包含多个表单的页面上按下的回车键？

我继承了一个网络应用程序，其中在任何输入字段中按回车键的通常功能已被禁用，因为页面包含多个表单，并且应用程序将无法确定（或者，所以我被告知) 采取哪种形式采取行动。该应用程序的设计没有提交按钮（如输入类型=“提交”），相反，设计者采用了 onclick 处理。以下是在其中一页上定义的两个按钮，仅供说明之用

<input type="button" value="LOGIN"  name="btnLoginOk" onclick="submit(); />"

<input type="button" class="button-click-grey" value="Find Link Partners"  
    onclick="raiseEvent('SubmitForm','',this);" style="cursor:pointer;" />

但我真的希望能够允许用户按回车键（如果他们愿意的话）。如果他们刚刚在与登录相关的字段中输入内容，则检测到该内容并执行 onclick="submit();"

或许 jQuery 有一个解决方案。

页面包含多个表单，并且 应用程序将无法 确定（或者，据我所知）哪个 形式到行动。

当您在输入控件上按 Enter 时，浏览器会寻找第一个提交按钮以那种形式并模拟点击它。在有多个按钮的情况下，将在键盘输入时按下第一个按钮（这绝不是一成不变的，浏览器可能会偏离这一点）。

如果您有两种形式，则按下按键的形式将具有it's首先按下提交按钮。因此，您实际上不需要对此进行任何特殊处理。你只需要停止妨碍。

您可以在表单上用代码模拟这一点：

 $( 'form' ).bind('keypress', function(e){
   if ( e.keyCode == 13 ) {
     $( this ).find( 'input[type=submit]:first' ).click();
   }
 });

或窗口（用于演示大致发生的情况）：

 $( window ).bind('keypress', function(e){
   if ( $( e.originalTarget ).is( ':input' ) && e.keyCode == 13 ) {
     $(  e.originalTarget )
       .closest( 'form' )
         .find( 'input[type=submit]:first' )
           .click();
   }
 });

当然假设.preventDefault()尚未被召集参加该活动。

底线：如果你有事件，你可以从中推测它来自什么元素，从而推断它属于哪种形式。即使在这种情况下：

<input type="button" value="LOGIN" name="btnLoginOk" onclick="submit();">

Here submit()是一个全局函数，但是当它被调用时，它的上下文（this) 将是元素，你可以这样做submit(e){ this.form.submit(); }.

该应用程序的设计没有提交按钮（如输入 type="submit")，相反，设计者采用了 onclick 处理。

在我看来，设计师并没有完全理解 DOM / 表单事件，并且正在绕着问题走很长的路。另一个可能的原因可能是该程序很旧，并且是在这些东西不像今天那样稳定或没有正确记录的时候设计的。

替换这个：

<form action="/login/" method="POST">
  [...]
  <input type="button" value="LOGIN" name="btnLoginOk" onclick="submit();">
</form>

有了这个：

<form action="/login/" method="POST">
  [...]
  <input type="submit" value="LOGIN" name="btnLoginOk">
</form>

然后向所有需要它的表单添加一个键处理程序，如果满足某些条件，该处理程序会检测并抑制输入（对于您实际上想要禁用此功能的表单）。

// for all forms that POST that have 2+ submit buttons
$( 'form[method=post]:has(:submit:eq(1))' ).bind('keydown', function(e){
  // if target is an enter key, input element, and not a button
  if ( e.keyCode == 13 && e.target.tagName == 'INPUT' && 
       !/^(button|reset|submit)$/i.test( e.target.type ) ) {
    return false;  // kill event
  }
});

或者更好的是：使用知道如何为您执行此操作的表单验证库（或 jQuery 插件）。