失去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事件（每次用戶松開所單擊鍵盤中的鍵時都會觸發功能），而不是進行change （當input元素獲取input的新值時發生）。

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

這是您的jsfiddle的更新：
https://jsfiddle.net/32u1vuoc/2/

Answer 2

更改行$('#table').on('change', ".Time1,.Time2", calculate); 到$('#table').on('input', ".Time1,.Time2", calculate); 。 在每個輸入的字符上，您的calculate方法將被執行。

在calculate方法內部，您可能需要檢查在開始計算之前是否已輸入開始時間和結束時間。 這將阻止“總小時數”顯示NaN。

我已經更新了您的小提琴，這是我的更新版本： https : //jsfiddle.net/32u1vuoc/4/