失去焦點的一個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

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

裏面你可能要檢查是否有開始和結束的時間已輸入你開始計算之前的calculate方法。這將阻止總共小時數顯示NaN。

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

Answer 2

而是對change（這發生在input元素獲得新值輸入），你可以使用keyup事件（這將觸發你的功能每時間，用戶將失去在鍵盤按鍵被點擊）：

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

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