jQuery的按鈕，輸入按鍵功能

Question

我有一個按鈕提交這樣的提交：

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

，我有jQuery的提交是這樣的：

$(document).ready(function() 
    { 
     $('#button_sign_in').click(function(){ 
      console.log('login'); 
      $.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(); 
        } 
       }, 
       error: function (e) { 
        console.log('error:'+e); 
       } 
      }); 
     }); 
    }); 

的問題是：我們可以用不提交輸入密鑰，所以用戶必須點擊登錄按鈕才能提交。

我想要什麼？設置回車鍵爲JS功能，用戶可以選擇使用回車鍵提交或點擊按鈕登錄。

感謝您的幫助。

Answer 1

檢查這個演示http://jsfiddle.net/yeyene/hd7zqafg/

首先點擊結果框（因爲還有其他框架），然後按回車鍵，提交按鈕點擊事件將觸發回車鍵，點擊按鈕後按&。

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

     $('#button_sign_in').click(function(){ 
      alert('You click submit!'); 
      console.log('login'); 
      $.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(); 
        } 
       }, 
       error: function (e) { 
        console.log('error:'+e); 
       } 
      }); 
     }); 
    }); 

Answer 2

將input包裝成表格。如果您在文本框中按Enter鍵，則會提交表單。

HTML

<form> 
    <input type="text"/> 
    <input type="submit" id="button_sign_in" class="button_sign_in" value="Sign in"/> 
</form> 

變化input類型"submit"，並呼籲.submit()，而不是.click()上form。

JS

$('form').submit(function(){ 
    console.log('login'); 
}); 

http://jsfiddle.net/nQ5fN/

Answer 3

更改你的輸入類型的提交按鈕的提交，避免違約。你的提交按鈕也應該用表單包裝。

$（ 「形式」）上（ 「提交」，函數（）{返回false;}）;

Answer 4

如果您只使用jQuery.Ajax，當您按時輸入肯定無法提交。 您必須添加<form></form>標籤才能實現它，並更改JS。

$('form').submit(function(){ //do ajax here }) 

Answer 5

提取呼叫$.ajax到一個名爲像submitForm新功能。

然後結合該函數的所有元素，可以導致提交：

function submitForm() { 
    $.ajax... etc. 
} 

$('#button_sign_in').on('click', submitForm); 
$('#your_input_textbox').on('keypress', function(e) { 
    if (e.keyCode === 13) { 
     submitForm(); 
    } 
}); 

Answer 6

您需要將事件附加到合適的元素（可能的輸入），我認爲是一個「用戶名」（文本框）輸入或（更可能）輸入「密碼」（密碼）。

的jsfiddle：http://jsfiddle.net/tyxPu/

jQuery的第

$(document).ready(function() { 
    var xhrJSON; 
    $('#button_sign_in').click(function() { 
     console.log('login'); 
     xhrJSON = $.ajax({ 
      url: "about:blank", 
      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(); 
        $("#debugger").append("<p>Button Click - Failed to 'Sign In'</p>") 
       } 
      }, 
      error: function (e) { 
       console.log('error:' + e); 
       $("#debugger").append("<p>Error - Button Click - Failed to 'Sign In'</p>") 
      } 
     }); 
    }); 
    $("#username").keypress(function (event) { 
     if (event.which == 13) { 
      xhrJSON = $.ajax({ 
       url: "about:blank", 
       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(); 
         $("#debugger").append("<p>Button Click - Failed to 'Sign In'</p>"); 
        } 
       }, 
       error: function (e) { 
        $("#debugger").append("<p>Error - Keypress - Failed to 'Sign In'</p>"); 
       } 
      }); 
     } 
    }); 
}); 

HTML科

<form id="login_form"> 
    <input type="textbox" id="username" placeholder="User Name" /> 
    <input type="button" id="button_sign_in" value="Sign In" /> 
</form> 
<div id="debugger"></div>