點擊輸入鍵/返回鍵應該會觸發提交按鈕

Question

我想使用提交按鈕單擊事件添加項目。現在我正在嘗試實現它，以便當您輸入數字並按回車時，它應該觸發提交按鈕並將該項添加到表中。我使用了keypress事件，它不起作用。這裏是my sample code。

我覺得我做錯了什麼。我的代碼如下。

// json data object 
 
var data = JSON.parse('{ "122233334444": ["Book","Three Musketters","DE7598490587","7584092043857", "03/18/13 11:17:51 AM","03/18/13 11:17:51 AM", "1" ], "122223355552":["eBook","Fall Colors","XYZ29494949","7584092043857", "03/18/13 11:17:51 AM","03/18/13 11:17:51 AM", "2" ], "122223355533":["eBook","Snowfall","XYZ29494949","7584092043857", "03/18/13 11:17:51 AM","03/18/13 11:17:51 AM", "3" ] }'); 
 
$("#submitid").keypress(function() { 
 
    $('#resend').prop('disabled', false); 
 
    $('#receipt').prop('disabled', false); 
 
    var rowId = $("#number").val(); 
 
    $("#number").val(""); 
 
    var rowData = data[rowId]; 
 
    if (rowData) { 
 
    var tr = $("<tr><td><input id='item-id' type='checkbox' checked/></td></tr>").attr("id", "datatable-row-" + rowId); 
 
    for (var col = 0; col < rowData.length; col++) 
 
     tr.append($("<td></td>").text(rowData[col])); 
 
    $("#datatable").prepend(tr); 
 
    $("#datatable").show(); 
 
    } else { 
 
    alert("Row doesn't exist in json object: " + rowId); 
 
    } 
 
}); 
 
$('#receipt').click(function() { 
 
    $('.column-id').removeAttr('checked'); 
 
    $('#resend').prop('disabled', true); 
 
    $('#receipt').prop('disabled', true); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="number" type="text" /> 
 
<button id="submitid">Submit</button> 
 

 
<table id="datatable"> 
 
    <colgroup> 
 
    <col><col><col><col><col><col><col><col> 
 
    </colgroup> 
 
    <thead> 
 
    <tr> 
 
     <th rowspan="1" colspan="1"> 
 
     <input type="checkbox" class="select-all column-id" id="item-id" title="Select All"> 
 
     </th> 
 
     <th rowspan="1" colspan="1"> 
 
     <div> 
 
      <span><a href="#" title="">Format</a></span> 
 
     </div> 
 
     </th> 
 
     <th rowspan="1" colspan="1"> 
 
     <div> 
 
      <span><a href="#" title="">Title</a></span> 
 
     </div> 
 
     </th> 
 
     <th rowspan="1" colspan="1"> 
 
     <div> 
 
      <span><a href="#" title="">Number</a></span> 
 
     </div> 
 
     </th> 
 
     <th rowspan="1" colspan="1"> 
 
     <div> 
 
      <span><a href="#" title="">Code</a></span> 
 
     </div> 
 
     </th> 
 
     <th rowspan="1" colspan="1"> 
 
     <div> 
 
      <span><a href="#" title="">Checkout Date</a></span> 
 
     </div> 
 
     </th> 
 
     <th rowspan="1" colspan="1"> 
 
     <div> 
 
      <span><a href="#" title="">Due Date</a></span> 
 
     </div> 
 
     </th> 
 
     <th rowspan="1" colspan="1"> 
 
     <div> 
 
      <span><a href="#" title="">ItemId</a></span> 
 
     </div> 
 
     </th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td><input id="item-id" class="column-id" type="checkbox"></td> 
 
     <td>Book</td> 
 
     <td>Three Musketters</td> 
 
     <td>DE7598490587</td> 
 
     <td>7584092043857</td> 
 
     <td>03/18/13 11:17:51 AM</td> 
 
     <td>03/18/13 11:17:51 AM</td> 
 
     <td>1</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<button id="resend" disabled>Resend</button> 
 
<button id="receipt" disabled>Receipt</button>

有什麼建議？

krish

Answer 1

您需要處理輸入​​或keypress沒有提交按鈕：

$('#number').keydown(function (event) { 
    if (event.keyCode === 13) { 
     // Enter was pressed 
    } 
}); 

Answer 2

以下是事情，你應該知道
1）你需要知道鍵碼輸入密碼（即）

2）由於您已標記jQuery，學習event.which，這個屬性表示被按下的特定鍵或按鈕。

3）.trigger()，執行附加到給定事件類型的匹配元素的所有處理程序和行爲。

$("#number").on('keypress', function (e) { 
    if(e.which == 13) { // check keycode condition  
    $('#submitid').trigger('click'); 
    } 
    else { 
    //Todos 
    } 
    e.preventDefault(); //Toprevent bounce 
});