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

Posted 2023-02-22

【中文标题】如何捕获在包含多个表单的页面上按下的输入键？

【英文标题】：How to capture enter key being pressed on pages containing multiple forms?

【发布时间】：2010-10-20 08:23:06

【问题描述】：

我继承了一个 Web 应用程序，其中在任何输入字段中按回车键的通常功能已被禁用，原因是页面包含多个表单，并且应用程序无法确定（或者，所以我被告知）采取哪种形式。应用程序的设计没有提交按钮（如输入类型=“提交”），相反，设计人员已经进行了点击处理。这是在其中一个页面上定义的两个按钮，用于说明

<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;" />

但我真的希望能够让用户在他们愿意的情况下按回车键，例如如果他们刚刚输入了与 LOGIN 关联的字段，则检测到并执行 onclick="submit();"

也许 jQuery 有一个解决方案。

【参考方案1】：

页面包含多个表单，并且 应用程序将无法 确定（或者，我被告知）哪个 付诸行动。

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

如果您有两个表单，则获得按键的表单将 这是第一个提交按钮被按下。因此，您实际上并不需要对此进行任何特殊处理。你只需要停止挡路。

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

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

应用程序的设计没有提交按钮（如输入 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 插件）。

【讨论】：

这听起来像是极好的建议。我将在本周早些时候预留一些时间来尝试这些建议。如果我还有更多的 cmets，请注意这个空间！至少我会评论我的进展情况。

【参考方案2】：

您可以在 jquery 中为 Enter 键绑定按键事件：

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

【参考方案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;
  

);

【讨论】：

我认为您可以通过以下方式合并其中的一些内容： $(['input','textarea','select']).focus(focus_form).end().blur(unfocus_form); // 不确定该端是否需要或将起作用

我也是这么想的。

【参考方案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>