输入带有 html 表单的密钥钩子答案

【问题标题】：Enter key hook with html form输入带有 html 表单的密钥钩子
【发布时间】：2011-03-12 17:15:02
【问题描述】：

我用 HTML 实现了表单：

<form id="loginForm" action="/?do=login" method="post" >
  <table width="50%" border="0">
    <tr>
      <td colspan="2">
        <span id="LoginErr"></span>
        <div>Login:</div>
        <input id="Login" type="text" maxlength="32" name="Login" value="{VAR %LOGIN}"/>
      </td>
    </tr>
    <tr>
      <td valign="bottom">
        <span id="PasswordErr"></span>
        <div>Passoword:</small></div>
        <input id="Password" type="password" maxlength="128" name="Password" value=""/>
      </td>
    </tr>
    <tr>
      <td>
        <a href="javascript:checkLogin()">Enter</a>
      </td>
    </tr>    
  </table>
</form>

这是检查和发布功能（使用jQuery）：

function checkLogin() 
{
  var focused = false;    

  function report_error(field, err)
  {
    $('#' + field + 'Err').html(err);
    if (!focused) 
    {
      $('#' + field).focus();
      focused = true;
    }
  }

  $('#LoginErr').html('');
  $('#PasswordErr').html('');

  $login = jQuery.trim($('#Login').val());
  $password = jQuery.trim($('#Password').val());

  if ($login.length == 0)
    report_error('Login', 'The login field is empty!');

  if ($password.length == 0)
    report_error('Password', 'The password field is empty!');

  if (!focused) 
   $('#loginForm').submit();

}

但是我在输入键时遇到了问题。当我按下此键时，表单会在没有我的 javascript 检查的情况下发布。当按下回车键并且没有更多操作时，我需要调用我的函数。

谢谢！

更新：正确的代码是：在表单标签中需要添加：onSubmit="return checkLogin() 在 javascript if (!focused) $('#loginForm').submit(); 中需要更改 return !focused; 感谢 rdamborsky。

【问题讨论】：

标签： javascript jquery html forms submit

【解决方案1】：

使用onSubmit 表单事件：

$(function() {
    $('#loginForm').onSubmit = checkLogin;
});

它将在您的表单数据实际发送之前调用任何触发提交事件（单击按钮，在其中一个字段中按下回车...）

【讨论】：

我试过这个。是的，按下回车时会调用 checkLogin，但也会调用 post 方法，即使 checks 为 false。
那么如果检查是假的，你需要return false;作为checkLogin()方法的结果
+1 始终使用带有提交按钮的正确表单并将验证码放在onsubmit 事件上，并根据需要返回true 或false。尝试使用调用 submit() 或关键处理程序的链接来伪造它会使您的表单变得更不可用、更难访问。