Question

我正在尝试使用提交按钮单击事件添加项目。现在我正在尝试实现它，以便当您输入数字到输入并按Enter键时，它应该触发提交按钮并将项目添加到表中。我使用了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

您需要处理输入中的keydown或keypress而不是提交按钮：

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

Answer 2

以下是你应该知道的事情 1）您需要知道输入密钥的密钥代码（ 13 ）

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
});

单击enter键/返回键应触发提交按钮

2 个答案: