如何捕获包含多个表单的页面上的输入键？ [英] How to capture enter key being pressed on pages containing multiple forms?

问题描述

我继承了一个Web应用程序，其中在任何输入字段中按下return的常规功能已被禁用，原因很简单，该页面包含多个表单，并且应用程序无法确定（或者，我被告知）采取哪种行动。应用程序的设计是因为没有提交按钮（如输入类型=提交），相反，设计人员已经进行了onclick处理。以下是在其中一个页面上定义的两个按钮，包括用于说明

I have inherited a web application where the usual ability to press return in any of the input fields has been disabled for the very good reason that the page contains multiple forms, and the application would not be able to determine (or, so I am told) which form to action. The application has been designed so there are no submit buttons (as in input type="submit") and, instead, the designers have gone for onclick handling. Here are two buttons that are defined on one of the pages, included for illustration

<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（）;

But I really want to be able to allow users to press return if they wish e.g. if they've just typed into a field associated with the LOGIN, then detect that and action the onclick="submit();"

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

Perhaps there is a solution with jQuery.

推荐答案

页面包含多个表单，而
应用程序将无法
确定（或者，我被告知）哪个
表格可以采取行动。

page contains multiple forms, and the application would not be able to determine (or, so I am told) which form to action.

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

When you press enter on an input control the browser seeks the first submit button in that form and simulates a click on it. In the case of multiple buttons, the first one will be pressed on keyboard enter (this is by no means written in stone and browsers may deviate from this).

如果你有两种形式，一个获得按键的按钮将按它的第一个提交按钮。因此，您并不需要对此进行任何特殊处理。你只需要停止阻碍。

If you have two forms, the one that got a keypress will have it's first submit button pressed. Therefore you don't really need any special handling of this. You just have to stop being in the way.

你可以在表格中的代码中模拟这个：

You can simulate this in code, on a form:

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

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

Or window (for a demonstration of what is roughly happening):

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

当然假设 .preventDefault（）事件没有被调用。

Assuming of course that .preventDefault() has not been called on the event.

底线：如果你有这个事件，你可以从中找出它来自哪个元素，从而形成它属于哪个元素。即使在这种情况下：

Bottom line: If you have the event you can divine from it what element it came from and therefore which form it belongs to. Even in this case:

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

这里 submit（）是一个全局函数，但是当它被调用时，它的上下文（ this ）将是元素，你可以做 submit（e）{this.form.submit（ ）; } 。

Here submit() is a global function, but when it is called, its context (this) will be the element and you may do submit(e){ this.form.submit(); }.

应用程序的设计使得没有提交按钮（如输入
） type =submit）而且，设计师已经进行了onclick处理。

The application has been designed so there are no submit buttons (as in input type="submit") and, instead, the designers have gone for onclick handling.

这对我来说听起来像设计师并不完全理解DOM /表格事件，并且正在解决问题。另一个可能的原因可能是该程序已经过时并且在这些东西不像今天那样稳定或正确记录时被设计出来。

This sounds to me like the designer doesn't fully comprehend DOM / form events and is going the long way around the problem. Another likely reason could be that the program is old and was designed back when these things weren't quite as stable, or properly documented, as they are today.

替换它：

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

然后为需要它的所有表单添加一个键处理程序，如果某些条件是，则检测并抑制输入遇到了（对于你实际上想要禁用它的表单）。

Then add a key handler to all forms that need it, that detects and suppresses enter if some condition is met (for the forms that you actually do want to disable this on).

// 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插件）你。

Or better still: Use a form validation library (or jQuery plugin) that knows how to do this for you.

这篇关于如何捕获包含多个表单的页面上的输入键？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！