基於輸入字段的計算

Question

我有以下代碼，可以在其中輸入發票價格和明細，也可以輸入多個值：

現在我需要進行計算，但是我迷失了實際開始的位置，希望它在每次鍵入或模糊或聚焦事件時發生

這是我的標記和編寫的Javascript：

<table><tr>
          <td><label for="invoicenumber">Invoice Number</label>
            <input type="text" id="invoicenumber" class="input-block-level-inputfields required" name="invoicenumber" placeholder="Invoice Number" value="#invoicenumber#">&nbsp;&nbsp;<a href="javascript:;" id="last5invoices">Last 5 Invoices</a>
            </td>
        </tr>
        <tr style="background:##cccccc;text-shadow:##E9E9E9;"><td style="padding-left:190px;"><div>
        <input type="button" id="btnAdd" class="btn" onclick="dupForm('input', '.clonedInput', 'btnAdd', 'btnDel');" value="Add" />
        <input type="button" id="btnDel" class="btn" onclick="rmForm('input', '.clonedInput', 'btnAdd', 'btnDel');" value="Remove" /><br /><br />
    </div>
            <div id="input1" style="margin-bottom:4px;" class="clonedInput">
                <input type="text" class="input-block-level-inputfields" name="product1" id="product1" placeholder="Product Details" />
                <input type="text" class="btnCalculate input-block-level-inputfields" title="Price" name="price1" id="price1" style="width:50px;" placeholder="Price" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" />
            </div>
        </td></tr>
        <tr>
          <td><label for="amount">Amount</label>
            <input type="text" id="amount" name="amount" class="input-block-level-inputfields" placeholder="0.00" value="#amount#" readonly="readonly" />&nbsp;&nbsp;<span id="Amountlabel"></span></td>
        </tr>
        <tr>
          <td><label for="vat">VAT</label>
            <input type="text" name="vat" id="vat" class="input-block-level-inputfields" placeholder="0.00" value="#vat#" maxlength="5" onfocus="vatCalculate()" onblur="vatCalculate()" />&nbsp;&nbsp;%</td>
        </tr>
        <tr>
          <td><label for="vat"><strong>Total</strong></label><span id="answer">#DecimalFormat(0.00)#</span><input type="hidden" name="hiddenAnswer" id="hiddenAnswer" value="" /></td>
        </tr></table>

我的jQuery代碼

<script type="text/javascript">
        $(document).ready(function(e) {
            $('input[placeholder=Price]').on('keyup', recalculateTotal);
            $('input[name="vat"]').on('keyup', vatCalculate);
            $("#currency").change(function () {
                var strData = $(this).find(":selected").text();
                if ($.trim(strData) != '(Select One)...') {
                    $("#Amountlabel").text(strData)
                }
                else {
                    $("#Amountlabel").text('');         
                }
            }).trigger('change');   
        }); 
        function trimNums(stringToTrim)
        {
            return stringToTrim.replace(/\d+$/,"");
        }         
        function vatCalculate() {
            var dvat = parseFloat($.trim($("#vat").val()));
            var calculate = parseFloat($("#amount").val() * dvat / 100);
            var existingData = parseFloat($("#amount").val());
            var totalanswer = parseFloat(existingData + calculate);
            var store = $('#hiddenAnswer').val(parseFloat(existingData + calculate));
            if($.trim(existingData) != 'NaN') {
                $("#answer").text(store.val());     
            }

        }
        function dupForm(divId, divClass, btnAdd, btnRm)
        {
            var num     = $(divClass).length;
            var newNum  = new Number(num + 1);
            var i;

            var newElem = $('#' + divId + num).clone().attr('id', divId + newNum);

            for (i=0; i < newElem.children().length; i++)
            {
                var attrId = trimNums(newElem.children(':eq('+i+')').attr('id'));
                var attrName = trimNums(newElem.children(':eq('+i+')').attr('name'));

                newElem.children(':eq('+i+')').attr('id', attrId + newNum).attr('name', attrName + newNum).attr('value','');
            }
            $('#' + divId + num).after(newElem);
            $('#' + btnRm).attr('disabled',false);
            vatCalculate();
        }
        function recalculateTotal() {
            var total = 0.00;
            $('input[title=Price]').each(function() {
                total += parseFloat($(this).val());
            });
            $('#amount').val(total);
            $('#answer').text(total);
        }
        function rmForm(divId, divClass, btnAdd, btnRm)
        {
            var num = $(divClass).length;

            $('#' + divId + num).remove();
            if (num-1 == 1) {
                $('#' + btnRm).attr('disabled','disabled');
                $('#' + btnAdd).attr('disabled',false); 
            }
            recalculateTotal();
            vatCalculate();
        }
    </script>

Answer 1

您可以從這里開始。 首先聽您需要的活動。

$(document).on('keyup focus blur', 'input',  function(e){
        console.log("Current Event ID" + e.target.id);      
        //OR
        console.log("Current Event ID" + this.id);      
    });