Блог

У меня есть приложение для вычислений, которое я создаю, и оно у меня есть, где на входе отображаются запятые, и вычисление все еще может выполняться, несмотря на запятые, но теперь я не могу получить вывод для отображения с разделителями в тысячу запятых. Я перепробовал почти все, что мог придумать. Может кто-нибудь показать мне, где я могу быть выключен.

Вот мой скрипт:

     jQuery( document ).ready( function( $ ) {
            // SHOW OUTPUT DIV ONLY WHEN ALL FIELDS ARE COMPLETED
            $( '#calc-top' ).bind( 'keyup change', function() {
                var orderAmount = $( '#orderAmt' ).val().replace( '', ',' );
                if ( orderAmount !== "" amp;amp; $( "#duration option:selected" ).val() !== "" amp;amp; $( "#debitFreq option:selected" ).val() !== "" ) {
                    $( 'div#calc-bottom' ).css( 'display', 'block' );
                } else {
                    $( 'div#calc-bottom' ).css( 'display', 'none' );
                }
            } );
        } );

    jQuery(document).ready(function($){
        $("#orderAmt").keyup(function(event) {
            // skip for arrow keys
            if (event.which >= 37 amp;amp; event.which <= 40) {
                event.preventDefault();
            }
            var $this = $(this);
            var num = $this.val().replace(/,/gi, "");
            var num2 = num.split(/(?=(?:[0-9]{3}) $)/).join(",");
            console.log(num2);
            // the following line has been simplified. Revision history contains original.
            $this.val(num2);
        });
        });
      // end jQuery

        // CALCULATE USER INPUT AND WRITE OUTPUT TO HTML ELEMENTS
        function calculate() {
            var orderAmt = parseFloat(document.getElementById( "orderAmt" ).value.replace(/,/g, ''));
            var duration = document.getElementById( "duration" ).value || 0;
            var debitFreq = document.getElementById( "debitFreq" ).value || 0;
            var outputAmt = document.getElementById( 'outputAmt' ) || 0;
            var numPayments = document.getElementById( 'numPayments' ) || 0;

            // CALCULATE NUMBER OF PAYMENTS
            if ( debitFreq == 7 ) {
                numPayments = Math.floor( duration / 7 );
            } else if ( debitFreq == 30 ) {
                numPayments = Math.floor( duration / 30 );
            }
            document.getElementById( 'numPayments' ).innerHTML = numPayments;

            // CALCULATE PAYMENT AMOUNT
            var stepA = (orderAmt / numPayments);
            var stepB = Math.floor( (((15 / 1000) * (duration / 360)) * 12) * orderAmt ) || 0;
            var stepC;
            if ( debitFreq == 7 ) {
                stepC = 0.10;
                //} else if (debitFreq == 30) {
                //stepC = 0.05;
            } else {
                stepC = 0;
            }
            var stepD = 0;
            //if ((duration == 30) amp;amp; (debitFreq == 30)) {
            //stepD = 0.05;
            //} else {
            //stepD = 0;
            //}
            var stepE = stepC - stepD;
            var stepF = Math.floor( (((15 / 1000) * (duration / 360)) * 12) * orderAmt ) || 0;
            var stepG = Math.ceil( stepE * stepF );
            var stepH = stepB - stepG;
            var stepI = stepH / numPayments;
            var monthlyPayments = stepI   stepA;
            outputAmt.innerHTML = monthlyPayments.toFixed( 2 ) || 0;

            // OUTPUT WILL SHOW CORRECT DEBIT FORMATS BASED ON USER INPUT (i.e. 'week', 'weeks', 'month', 'months')
            var outputDefault1;
            if ( document.getElementById( "debitFreq" ).value == 7 ) {
                outputDefault1 = "week";
            } else if ( document.getElementById( "debitFreq" ).value == 30 ) {
                outputDefault1 = "month";
            }
            document.getElementById( "outputTerm1" ).innerHTML = outputDefault1;

            var outputDefault2;
            if ( document.getElementById( "debitFreq" ).value == 7 ) {
                outputDefault2 = "weeks";
            } else if ( document.getElementById( "debitFreq" ).value == 30 ) {
                outputDefault2 = "months";
            }
            document.getElementById( "outputTerm2" ).innerHTML = outputDefault2;

        }
        // end calculate function

        // ONLY ALLOW NUMERIC INPUT, NO ALPHA OR SPECIAL CHARACTERS EXCEPT COMMAS
        function isNumberKey( evt ) {
            var theEvent = evt || window.event;
            var key = theEvent.keyCode || theEvent.which;
            key = String.fromCharCode( key );
            var regex = /^[0-9.,] $/;
            if ( !regex.test( key ) ) {
                theEvent.returnValue = false;
                if ( theEvent.preventDefault ) {
                    theEvent.preventDefault();
                }
            }
        }

        // TRIGGER EVENTS WHEN THE USER ENTERS DATA
        var userinputNum = document.getElementById( "orderAmt" );
        userinputNum.oninput = calculate;
        userinputNum.onkeypress = isNumberKey;

        var userinputDays = document.getElementById( "duration" );
        userinputDays.onchange = calculate;

        var userinputFreq = document.getElementById( "debitFreq" );
        userinputFreq.onchange = calculate;
  

Вот моя скрипка: http://jsfiddle.net/qo5b7z93 /

Любая помощь приветствуется!

Пожалуйста, взгляните на эту обновленную скрипку, я думаю, это должно сделать то, что вам нужно.

 function FormatNumber(nStr) {
    nStr  = '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.'   x[1] : '';
    var pattern = /(d )(d{3})/;
    while (pattern.test(x1)) {
        x1 = x1.replace(pattern, '$1'   ','   '$2');
    }
    return x1   x2;
}
  

Попробуйте это:

Примечание: приведенная ниже функция очень подробная для удобства чтения / понимания. Вероятно, вы захотите упростить его для производства

Вы бы изменили outputAmt.innerHTML = monthlyPayments.toFixed( 2 ) || 0
—> outputAmt.innerHTML = placeCommas(monthlyPayments);

 function placeCommas(number) {
  if (number !== null amp;amp; number !== undefined) {
    number = number.toFixed(2);
    var splitNum = number.split(".");
    var num = splitNum[0];
    var decimals = splitNum[1];

    var numArr = num.split("").reverse();
    var commaArr = [];
    for (var i = 0; i < numArr.length; i  ) {
      commaArr.push(numArr[i]);
      if (i !== numArr.length - 1 amp;amp; i % 3 === 2) {
        commaArr.push(",");
      }
    }
    num = commaArr.reverse().join("");
    number = num   "."   decimals;
    return number;
  }
}
console.log(placeCommas(0));
console.log(placeCommas(10));
console.log(placeCommas(100));
console.log(placeCommas(1000));
console.log(placeCommas(10000));
console.log(placeCommas(100000));
console.log(placeCommas(1000000));
console.log(placeCommas(10000000));
console.log(placeCommas(100000000));
console.log(placeCommas(1000000000));  

Не так удобно блокировать использование клавиш со стрелками или даже любой клавиши, если на то пошло. Ваши ограничения также удаляют возможность выделения текста с помощью стрелки shift, чтобы удалить ввод с помощью обратного пробела. И когда они перемещают положение курсора с помощью мыши, как только они вводят, курсор переворачивается до конца. Это ненормальное поведение, и пользователи будут разочарованы.

Пусть они вводят то, что хотят, и просто очищают, когда они выходят из поля ввода. Это намного удобнее для пользователя.

Поэтому я бы предложил применять формат чисел только тогда, когда фокус покидает поле ввода, и удалять все форматирование, как только фокус снова вводится.

Здесь также есть регулярное выражение replace для применения форматирования за один раз:

 $(this).val()
    .replace(/[^d.]/gi, "") // clean-up
    .replace(/B(d{3})(?=(?:d{3})*(?:.|$))/g, ',$1'); // format
  

Вот обновленная скрипка.