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

Question

我继承了一个Web应用程序，其中在任何输入字段中按下return的常规功能已被禁用，原因很简单，该页面包含多个表单，并且应用程序无法确定（或者，所以我被告知哪种形式行动起来。应用程序的设计是因为没有提交按钮（如输入类型=“提交”），相反，设计人员已经进行了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;" />

但我真的希望能够允许用户按下他们想要的回报，例如如果他们只是输入了与LOGIN相关联的字段，那么检测并执行onclick =“submit（）;”

也许有一个jQuery的解决方案。

Answer 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(); }。

应用程序的设计是因为没有提交按钮（如输入类型=“提交”），相反，设计人员已经进行了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插件）。

Answer 2

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

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

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

});

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属性，您也可以使用常规提交按钮执行此操作。

---

Edit: One more method is to combine POST and GET values, i.e.:

<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>