jQuery输入密钥不能为其他形式的工作

Question

我有我的jQuery输入密钥的问题。对于表单登录回车键是工作物品，但对于表单重置密码，回车键不工作，但点击它即可。

不工作意味着：如果我按回车键，它将重定向到操作页面，而无需在JS中进行任何验证。

现在我想设置表单重置密码的回车键。

这是到目前为止我的代码：

JS

$(document).ready(function()    
    { 
     $(document).bind('keypress', function(e) 
     { 
      if (e.keyCode == 13) { 
       $('#button_sign_in').trigger('click'); 
      } 
     }); 

     $('#button_sign_in').click(function() 
     { 
      if ($("#username").val().length == 0) 
      { 
       $('#button_sign_in').attr("disabled", false); 
       $('#username').focus(); 
      } 
      else if ($("#password").val().length == 0) 
      { 
       $('#button_sign_in').attr("disabled", false); 
       $('#password').focus(); 
      } 
      else if ($("#username").val().length == 0 && $("#password").val().length == 0) 
      { 
       $('#button_sign_in').attr("disabled", false); 
       $('#username').focus(); 
      } 
      else 
      { 
      $.ajax 
      ({ 
       url: "login", 
       type: "post", 
       data: $('#login_form').serialize(), 
       dataType:'json', 
       success: function (data) 
       { 
        if (data.status=='SUCCESS') 
        { 
         window.location='home.php'; 
        } 
        else 
        { 
         $('#button_sign_in').shake(4,6,700,'#CC2222'); 
         $('#username').focus(); 
         $('#password').val(""); 
         $('#button_sign_in').attr("disabled", false); 
         $("#info").text("Wrong username or password."); 
        } 
       }, 
       error: function (e) { 
        console.log('error:'+e); 
       } 
      }); 
      } 
     }); 

$(document).bind('keypress', function(e) 
     { 
      if (e.keyCode == 13) { 
       $('#button_reset').trigger('click'); 
      } 
     }); 

     $('#button_reset').click(function() 
     { 
      if ($("#email").val().length == 0) 
      { 
       $('#button_reset').attr("disabled", false); 
       $('#email').focus(); 
       $("#info2").text("Email is required."); 
       $('#button_reset').shake(4,6,700,'#CC2222'); 
      } 
      else 
      { 
      $.ajax 
      ({ 
       url: "check_email", 
       type: "post", 
       data: $('#reset_form').serialize(), 
       dataType:'json', 
       success: function (data) 
       { 
        if (data.status=='FOUND') 
        { 
         $("#info2").html('<span class="success">Password reset instructions has sent to your email.</span>'); 
         $('#email').val(""); 
         $('#email').focus(); 
        } 
        else 
        { 
         $('#button_reset').shake(4,6,700,'#CC2222'); 
         $('#email').focus(); 
         $('#button_reset').attr("disabled", false); 
         $("#info2").text("Email is invalid."); 
        } 
       }, 
       error: function (e) { 
        console.log('error:'+e); 
       } 
      }); 
      } 
     }); 
    }); 

像这样的登录表单的HTML代码：

<form id="login_form"> 
          <div id="info"></div> 

          <table>         
           <td><input type="text" name="username" class="input" id="username" placeholder="Username or email"/></td> 

           <tr> 

           <td><input type="password" name="password" class="input" id="password" placeholder="Password"/></td> 

           <tr> 

           <td><input type="button" id="button_sign_in" class="button_sign_in" value="Sign in"/></td> 

           <tr> 

           <td> 
            <span class="keep_logged_in"><input type="checkbox"> Keep me logged in</span> 
           </td> 
          </table> 
         </form> 

和形式复位这样的：

<form id="reset_form" class="collapse"> 
          <div id="info2" class="info2"></div> 
          <table class="t_info"> 
           <td><input type="text" name="email" class="input" id="email" placeholder="Email"/></td> 

           <tr> 

           <td><input type="button" id="button_reset" class="button_reset" value="Submit"/></td> 
          </table> 
         </form> 

有什么建议吗？也许我的代码有问题？

Answer 1

您有两个单独的按键处理程序绑定到document，并且都没有做任何事情来测试用户在按下输入时键入的字段。

为什么不绑定这些对你的每一个形式，而不是：

$("#login_form").bind('keypress', function(e) { 
     if (e.which === 13) { 
      e.preventDefault(); 
      $('#button_sign_in').trigger('click'); 
     } 
    }); 

    $("#reset_form").bind('keypress', function(e) { 
     if (e.which === 13) { 
      e.preventDefault(); 
      $('#button_reset').trigger('click'); 
     } 
    }); 

这样，当进入IS表单中压制这种形式的按钮，你触发点击的人。

Answer 2

您可以尝试采用更通用的方法，方法是选择相关（最接近的）form元素，然后触发提交。此外，我还建议考虑申请您keypress事件，更具体的元素，就像这样：

$('input, select, textarea').bind('keypress', function(e) 
{ 
    if (e.keyCode == 13) { 
     $(this).closest('form').trigger('submit'); 
    } 
}); 

Answer 3

不知道这是否是你想要什么，但似乎你想同时在点击和提交两种形式进入新闻界？

如果是这种情况，我认为你应该将你的AJAX调用绑定到form.submit，然后添加一个e.preventDefault来防止提交行为与默认行为（因为你想使用你的AJAX而不是默认提交行为）。

事端这样的：

$('#login_form').submit(function(e){ 

    e.preventDefault() 

    // now do your AJAX call for login_form here (the code of your $('#button_sign_in').click) 

}) 

$('#reset_form').submit(function(e){ 

    e.preventDefault() 

    // now do your AJAX call for reset_form here (the code of your $('#button_reset').click) 

}) 

希望这有助于

编辑

你应该改变两个按钮的type到submit