使用 keyup 問題更改文本字段的值

Question

我在頁面上動態插入行。 我想要做的是計算所有星期一的輸入數據並將其顯示在一個總框中。 數字可以以整數或 0.25、0.50、0.75 的增量輸入，如果您在兩者之間使用任何數字，它將四舍五入。

當我使用blur時，我有這個工作，但我真的很喜歡它在keyup上工作，所以它會即時更新。

我的問題是，如果我使用keyup ，除非我按住 delete ，否則該值將自動變回值更正后的值。 鍵入 2.23 作為示例。

如果沒有完全重寫我的代碼，有沒有一種方法可以即時更新整個字段？ 下午的大部分時間我都在為這個問題撓頭。 任何幫助表示贊賞。

 $(document).on('keyup', '.Monday', findTotalMon); function findTotalAll() { var arr = document.getElementsByName('total'); var tot = 0; for (var i = 0; i < arr.length; i++) { if (parseFloat(arr[i].value)) tot += parseFloat(arr[i].value); } document.getElementById('totalHoursAll').value = tot; if (tot === 0) { document.getElementById('totalHoursAll').value = ''; } } function findTotalMon() { var arr = document.getElementsByClassName('Monday'); var tot = 0; for (var i = 0; i < arr.length; i++) { if (parseFloat(arr[i].value)) { var newValue = ''; newValue = (.25 * Math.round(4 * arr[i].value)); arr[i].value = newValue; tot += parseFloat(newValue); } } document.getElementById('totalHoursMon').value = tot; if (tot === 0) { document.getElementById('totalHoursMon').value = ''; } findTotalAll(); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <input class="form-control full-width Monday" name="monday" id="monday" type="number" /> <input name="total" id="totalHoursMon" type="text" readonly/>

Answer 1

原答案

---

我使用的是移動設備，但我將嘗試解釋我的意思。

 $(document).on('keyup', '.Monday', findTotalMon); function findTotalAll() { var arr = document.getElementsByName('total'); var tot = 0; for (var i = 0; i < arr.length; i++) { if (parseFloat(arr[i].value)) tot += parseFloat(arr[i].value); } document.getElementById('totalHoursAll').value = tot; if (tot === 0) { document.getElementById('totalHoursAll').value = ''; } } function findTotalMon() { var arr = document.getElementsByClassName('Monday'); var tot = 0; for (var i = 0; i < arr.length; i++) { if (parseFloat(arr[i].value)) { var newValue = ''; newValue = (.25 * Math.round(4 * arr[i].value)); // Don't change this value yet // This is causing the input to change as you type /* arr[i].value = newValue; */ // Instead you can create an html element next to the input // And update the element with the new value // After the user clicks out of the input you can then either update the input with the new value // Or you can leave the input the way it is and keep the updated values beside the input tot += parseFloat(newValue); } } document.getElementById('totalHoursMon').value = tot; if (tot === 0) { document.getElementById('totalHoursMon').value = ''; } findTotalAll(); }

編輯答案

---

這就是我在上面試圖解釋時的想法。

 $(document).ready(function() { // Set event listener on '.Monday' inputs $(document).on('keyup', '.Monday', findTotalMon); // Set event listener to add new input $('body').on('click', '#addMore', addInput); /** * Add new input */ function addInput() { // Get array with all elements with class 'monday-group' var arr = $('.monday-group'); // Get array length var length = arr.length; // Set length to the insert next number var inputIndex = length; // HTML code for the new input var newInput = '<div class="form-group col-md-4 monday-group">' + '<input class="form-control full-width Monday d-inline-block mt-2 w-75" name="monday_' + inputIndex + '" id="monday_' + inputIndex + '" type="number" placeholder="Monday-' + inputIndex + '" />' + '<span class="adjusted-' + inputIndex + ' text-muted d-inline-block ml-4"></span>' + '</div>'; // Check if there are 5 fields or less // If there are 5 fields then hide the add more button if ( length >= 5 ) { $('#addMore').css('display', 'none'); return false; } // Insert the new input field $(newInput).insertAfter(arr[length - 1]); } /** * Get grand total */ function findTotalAll() { // Get array with all inputs with the class of 'row-total' var arr = $('.row-total'); // Set total = 0 var tot = 0; // Loop through array and add value to totals for (var i = 0; i < arr.length; i++) { if (parseFloat(arr[i].value)) tot += parseFloat(arr[i].value); } // Show the totals $('#totalHoursAll').val(tot); // If totals = 0 then leave the totals input blank instead of 0 if (tot === 0) { $('#totalHoursAll').val(''); } } /** * Find totals for Monday */ function findTotalMon() { // Get inputs with a class of 'Monday' var arr = $('.Monday'); // Set totals to 0 var tot = 0; // Loop through array adding the totals for (var i = 0; i < arr.length; i++) { if (parseFloat(arr[i].value)) { var newValue = ''; // Calculate the adjusted value newValue = (.25 * Math.round(4 * arr[i].value)); // This is the faded text with the adjusted value // Include the adjusted value and display in case it is hidden $('.adjusted-' + i).html(newValue).css('display', 'block'); // Set the total value tot += parseFloat(newValue); } else { // Hide the adjusted value and make it blank $('.adjusted-' + i).html('').css('display', 'none'); } } // Update the totals $('#totalHoursMon').val(tot); // If totals = 0 then leave the field blank instead of 0 if (tot === 0) { $('#totalHoursMon').val(''); } // Calculate Grand Totals findTotalAll(); } });

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="container mt-4"> <div class="row"> <div class="col-12"> <div class="form-group col-md-4 monday-group"> <input class="form-control full-width Monday d-inline-block w-75" name="monday_0" id="monday_0" type="number" placeholder="Monday-0" /> <span class="adjusted-0 text-muted d-inline-block ml-4"></span> </div> <div class="col-md-4"> <input type="text" class="form-control row-total" id="totalHoursMon" placeholder="Monday Totals" readonly> <button id="addMore" class="btn btn-primary mt-4">Add More</button> </div> </div> </div> <div class="row mt-4"> <div class="col-md-4 offset-md-8"> <input class="form-control" name="total" id="totalHoursAll" type="text" placeholder="Grand Total" readonly/> </div> </div> </div>