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

Question

我继承了一个Web应用程序，其中常规的在任何输入字段中按回车键的能力已被禁用，原因是该页面包含多个表单，并且应用程序将无法确定（或者，我被告知）哪个表单需要处理。该应用程序已经设计成没有提交按钮（如input type="submit"），而是使用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解决此问题。

- MysticBrook

Answer 1

页面包含多个表单，应用程序无法确定（或者，据我所知），哪个表单是操作的。

当你在一个输入控件上按下回车键时，浏览器会查找该表单中的第一个提交按钮，并模拟点击它。如果有多个按钮，则在键盘回车时将按下第一个按钮（这并不是铁板钉钉的规定，浏览器可能会有所偏差）。

如果您有两个表单，则被按键触发的表单将被处理并且 它的 第一个提交按钮将被按下。因此，您不需要特殊处理这个问题。只需停止阻碍即可。

您可以在代码中模拟这一过程：

 $( '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();">

在这里，submit()是一个全局函数，但当它被调用时，它的上下文(this)将是元素，并且您可以执行submit(e){ this.form.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插件），它知道如何为您执行此操作。

- Borgar

---

这听起来都是非常好的建议。我会在本周早些时候留出一些时间来尝试这些建议。如果我有任何进一步的评论，敬请关注此处！至少我会评论一下我的进展情况。 - MysticBrook

Answer 2

你可以在jQuery中绑定按键事件来捕捉回车键：

$("form").bind("keypress", function(e) {
   if (e.keyCode == 13) {
      your_custom_submit_function();
      return false; // ignore the default event
   }
});

- sanmai

Answer 3

祈祷这会奏效

$(document).ready(function() {
  var focussed_form;
  $('input').focus(focus_form);
  $('input').blur(unfocus_form);
  $('textarea').focus(focus_form);
  $('textarea').blur(unfocus_form);
  $('select').focus(focus_form);
  $('select').blur(unfocus_form);

  $(document).keypress(function(e) {
    if(e.keyCode == 13) 
    {
      $(focussed_form).trigger('submit'); 
    }
  });

  function focus_form(){
    focussed_form = $(this).closest('form');
  }

  function unfocus_form(){
    focussed_form = NULL;
  }

});

- wheresrhys

---

我认为你可以用以下代码简化一下：$（['input'， 'textarea'， 'select']）.focus（focus_form）。end（）。blur（unfocus_form）; //不确定是否需要那个end或它是否有效 - Matt

这也是我所思考的。 - Dana the Sane

Answer 4

我认为你不需要使用jQuery或JavaScript来完成这个任务。你可以检测用户提交的表单，甚至可以检测到哪个提交按钮被点击了（如果一个表单中有多个提交按钮）。

以下是你可以使用的代码：

<form action="http://foo.com/uri" method="POST">
  <input type="submit" name="action1a" value="add" />
  <input type="submit" name="action1b" value="delete" />
</form>
<form action="http://foo.com/uri" method="POST">
  <input type="submit" name="action2a" value="add" />
  <input type="submit" name="action2b" value="delete" />
  <input type="submit" name="action2c" value="someOtherAction" />
</form>

对于表单处理脚本，您只需检查提交按钮的名称即可，例如：

if (isset($_POST['action1a'])) ... // PHP syntax

或者，您可以将图像用作提交按钮，然后可以为所有提交按钮使用相同的名称并仅检查它们的值--如果每个按钮都具有唯一的value属性，则也可以对普通提交按钮执行此操作。

---

编辑： 另一种方法是合并POST和GET值，即：

<form action="http://foo.com/uri?form=1" method="POST">
  <input type="submit" name="action" value="add" />
  <input type="submit" name="action" value="delete" />
</form>
<form action="http://foo.com/uri?form=2" method="POST">
  <input type="submit" name="action" value="add" />
  <input type="submit" name="action" value="delete" />
</form>

- Calvin