javascript - 失去 HTML 表中文本字段的焦点以启动 JQuery 计算

Question

我有一个 HTML 表格，用户可以在其中输入他的待机开始时间和待机结束时间，该时间计算总时数，并基于此计算获得的补偿时数。这一切都有效。

现在，它所做的是，每当用户输入开始和结束时间时，用户必须将焦点从文本字段上移开，以便总时数和补休时数显示结果。

我想要的是，用户不必通过单击页面中的任意位置而失去对“待机结束时间”文本字段的关注，即可开始计算。

这是我的代码:

var numRows = 2,
  ti = 5;
var tableCount = 1;
var index = 1;

window.standBy = function() {
  var sum = 0;
  $(".Standby").each(function(index, stand) {
    sum += parseFloat($(stand).val());
  })

  $(".grandtotal").val(sum)
}

function calculate() {
  var tr = $(this).closest('tr');

  var hours = parseInt($(".Time2", tr).val().split(':')[0], 10) - parseInt($(".Time1", tr).val().split(':')[0], 10);
  if (hours < 0) hours = 24 + hours;
  $(".Hours", tr).val(hours);

  if (hours <= 4) $(".Standby", tr).val("0.5");
  if (hours == 4) $(".Standby", tr).val("0.5");
  if (hours > 4 && hours < 8) $(".Standby", tr).val("1");
  if (hours == 8) $(".Standby", tr).val("1");
  if (hours > 8 && hours < 12) $(".Standby", tr).val("1.5");
  if (hours == 12) $(".Standby", tr).val("1.5");
  if (hours > 12 && hours < 16) $(".Standby", tr).val("2");
  if (hours == 16) $(".Standby", tr).val("2");
  if (hours > 16 && hours < 20) $(".Standby", tr).val("2.5");
  if (hours == 20) $(".Standby", tr).val("2.5");
  if (hours > 20 && hours < 24) $(".Standby", tr).val("3");
  if (hours == 24) $(".Standby", tr).val("3");
  if (hours > 24) alert("You cannot exceed a 24 hour period.");



}
$('#table').on('change', ".Time1,.Time2", calculate);
$('#table').find(".Time1").trigger('change')


window.addTime = function() {
  tableCount++;
  $('#timeTable').clone().attr('id', "timeTable" + tableCount).appendTo('#table');
  $('#timeTable' + tableCount).find("input").val("");
  index++;
  $('#timeTable' + tableCount + ' .increment').html(tableCount);

};


$(document).on('click', 'button.removeTime', function() {
  var closestTable = $(this).closest('table');
  if (closestTable.attr('id') != "timeTable") {
    closestTable.remove();
  }
  tableCount--;
  if (tableCount < 1) {
    tableCount = 1;
  }

  standBy();
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1 class="text-center">Compensatory Time for Standby Hours Calculator</h1>
<br>
<br>
<br>

<h3>
  Time format is in 24h
</h3>
<h6>
  <I>Example: If you want to type in "8 AM", the correct format would be: "8". <br> If you want to type in "8 PM", the correct format would be "20".</I>
</h6>

<div id="table">
  <table id="timeTable" class="tg table table-striped table-bordered table-condensed tab_logic">
    <tr class="headings">
      <th class="tg-yw41"></th>
      <th class="tg-yw41"></th>
      <th class="tg-yw4l">Standby Start Time</th>
      <th class="tg-yw4l">Standby End Time</th>
      <th class="tg-yw4l">Hours in total</th>
      <th class="tg-yw4l">Compensatory Hours Earned</th>
    </tr>
    <tr>
      <td class="increment headings">1</td>
      <td class="tg-yw4l headings">
        <button class="removeTime btn btn-danger">Remove Time</button>
      </td>

      <td class="tg-yw4l headings">
        <input class="Time1 form-control input-md " value="" placeholder="Enter your start time" />
      </td>
      <td class="tg-yw4l headings">
        <input class="Time2 form-control input-md" value="" placeholder="Enter your end time" />
      </td>
      <td class="tg-yw4l headings">
        <input type="text" class="Hours form-control input-md" value="0" readonly="" />
      </td>
      <td class="tg-yw4l headings">
        <input type="text" class="Standby form-control input-md" value="0" readonly="" />
      </td>
    </tr>
  </table>
</div>







<hr>

<button class="btn btn-success pull-left" onclick="addTime();"><span class="glyphicon glyphicon-plus-sign">Add Time</span></button>
<br>
<br>

<button class="btn btn-primary" onclick="standBy();">Calculate Total Compensatory Hours Earned</button>

<caption>Total Compensatory Hours:</abbr>
</caption>&nbsp;
<input class="grandtotal" value="" readonly="" />

我还有一个可用的 JSFiddle:https://jsfiddle.net/32u1vuoc/1/

Answer 1

您可以使用 keyup 事件(这将在 input 元素获得输入的新值时发生)而不是 change每次用户在键盘上松开被点击的键时触发您的函数):

$('#table').on('keyup', ".Time1,.Time2", calculate);
$('#table').find(".Time1").trigger('keyup')

这是对您的 jsfiddle 的更新:
https://jsfiddle.net/32u1vuoc/2/