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