[英]changing value of text field using keyup issues
I am dynamically inserting rows onto a page.我在页面上动态插入行。 What I'm trying to do is calculate all the Monday input data and show it in a total box.
我想要做的是计算所有星期一的输入数据并将其显示在一个总框中。 Numbers can be input in either whole numbers or in .25, .50, .75 increments and it will round up if you use any number in between.
数字可以以整数或 0.25、0.50、0.75 的增量输入,如果您在两者之间使用任何数字,它将四舍五入。
I have this working when I use blur
but I'd really like it to work on keyup
so it updates on the fly.当我使用
blur
时,我有这个工作,但我真的很喜欢它在keyup
上工作,所以它会即时更新。
My issue is that if I use keyup
, the value will automatically change back to the value corrected value, unless I hold down delete.我的问题是,如果我使用
keyup
,除非我按住 delete ,否则该值将自动变回值更正后的值。 Type 2.23 for an example of this.键入 2.23 作为示例。
Without completely re-writing my code, is there a way I can have the total field update on the fly?如果没有完全重写我的代码,有没有一种方法可以即时更新整个字段? I have been scratching my head over this most of the afternoon.
下午的大部分时间我都在为这个问题挠头。 Any help is appreciated.
任何帮助表示赞赏。
$(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/>
Original Answer原答案
$(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(); }
Edited Answer编辑答案
$(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.