以html形式输入key hook

发布于 2024-10-21 11:33:38 字数 1807 浏览 0 评论 0原文

我在 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();

} 

但是我在使用 Enter 键时遇到了问题。当我按下此键时,表单将在没有我的 javascript 检查的情况下发布。 当按下回车键并且不再执行任何操作时,我需要调用我的函数。

谢谢!

更新: 正确的代码是: 在表单标签中需要添加:onSubmit="return checkLogin() 在 javascript 中 if (!focused) $('#loginForm').submit(); 需要在 return !focused; 时进行更改 感谢拉丹博斯基。

I implemented form in 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>

This is the check and post function (using 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();

} 

But I have trouble with enter key. When i press this key form is posted without my javascript check.
I need call my function when enter key is pressed and no more action.

Thanx!

Update:
Correct code is:
in form tag need add: onSubmit="return checkLogin()
in javascript if (!focused) $('#loginForm').submit(); need change on return !focused;
Thanks to rdamborsky.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

橘寄 2024-10-28 11:33:38

使用 onSubmit 表单事件:

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

它将在表单数据实际发送之前调用,无论触发提交事件(单击按钮,在字段之一中按 Enter 键...)

use onSubmit form event:

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

It will be called just before your form's data are actually sent whatever triggers the submit event (click on button, pressing enter within one of fields...)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文