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

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()是一个全局函数,但是当它被调用时,它的context(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

手指交叉，这会起作用

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

});