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

我继承了一个web应用程序，其中在任何输入字段中按return键的通常功能都已被禁用，原因很好，页面包含多个表单，应用程序将无法确定（或者，我被告知）要操作哪个表单。应用程序的设计没有提交按钮（如在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;" />

---

祝你好运这会有用的

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

});

---

我认为这不需要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>

或者，您可以使用图像作为提交按钮，然后您可以对所有提交按钮使用相同的名称，只需检查它们的值——如果每个按钮都具有唯一的

值

属性，您也可以对普通提交按钮执行此操作。

---

编辑： 另一种方法是组合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>

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

当您在输入控件上按enter键时，浏览器将查找该表单中的第一个提交按钮，并模拟单击该按钮。如果有多个按钮，第一个按钮将在键盘输入时按下（这绝不是一成不变的，浏览器可能会偏离这一点）

如果您有两个表单，则按键的表单将按下其第一个提交按钮。因此，您不需要对此进行任何特殊处理。你只要别再碍事就行了

您可以在代码中，在表单上模拟此操作：

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

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

当然，假设事件上未调用

.preventDefault（）

一句话：如果你有这个事件，你可以从中判断它来自什么元素，因此它属于什么形式。即使在这种情况下：

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

为此：

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

---

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

您可以为jQuery中的Enter键绑定按键事件：

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

---

我想你可以用：$（['input'，'textarea'，'select']）.focus（focus_form.end（）.blur（unfocus_form）；//我不确定是否需要这样的结局，也不确定这是否会奏效。这也是我一直在想的。这听起来都是很好的建议。我将在本周初预留一些时间来尝试这些建议。如果我有任何进一步的评论，请观看此空间！至少，我会评论一下我的情况。

<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
  }
});

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