JavaScript

How to format a number as a currency value in JavaScript

by

Learn how to convert a number into a currency value, using the Vanilla JavaScript

Say you have a number like $10, and it represents the price of something.

You want to transform it in to $10.00 directly in the input form

If the number has more than 3 digits, however, it should be displayed differently, for example 1000 should be displayed as $1,000.00

<!DOCTYPE html>
<html>
<head>
    <title>Number Formatter</title>
</head>
<body>
    <input type="text" name="currency-field" id="currency-field" pattern="^\$\d{1,3}(,\d{3})*(\.\d+)?$" value="" data-type="currency" placeholder="$1,000,000.00">

    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script type="text/javascript">
        // Jquery Dependency

        $("input[data-type='currency']").on({
            keyup: function() {
              formatCurrency($(this));
            },
            blur: function() {
              formatCurrency($(this), "blur");
            }
        });


        function formatNumber(n) {
          // format number 1000000 to 1,234,567
          return n.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",")
        }


        function formatCurrency(input, blur) {
            // appends $ to value, validates decimal side
            // and puts cursor back in right position.

            // get input value
            var input_val = input.val();

            // don't validate empty input
            if (input_val === "") { return; }

            // original length
            var original_len = input_val.length;

            // initial caret position
            var caret_pos = input.prop("selectionStart");

            // check for decimal
            if (input_val.indexOf(".") >= 0) {

                // get position of first decimal
                // this prevents multiple decimals from
                // being entered
                var decimal_pos = input_val.indexOf(".");

                // split number by decimal point
                var left_side = input_val.substring(0, decimal_pos);
                var right_side = input_val.substring(decimal_pos);

                // add commas to left side of number
                left_side = formatNumber(left_side);

                // validate right side
                right_side = formatNumber(right_side);

                // On blur make sure 2 numbers after decimal
                if (blur === "blur") {
                    right_side += "00";
                }

                // Limit decimal to only 2 digits
                right_side = right_side.substring(0, 2);

                // join number by .
                input_val = "$" + left_side + "." + right_side;

            } else {
                // no decimal entered
                // add commas to number
                // remove all non-digits
                input_val = formatNumber(input_val);
                input_val = "$" + input_val;

                // final formatting
                if (blur === "blur") {
                    input_val += ".00";
                }
            }

            // send updated string to input
            input.val(input_val);

            // put caret back in the right position
            var updated_len = input_val.length;
            caret_pos = updated_len - original_len + caret_pos;
            input[0].setSelectionRange(caret_pos, caret_pos);
        }

    </script>
</body>
</html>

Auto format currency input field with commas and decimals if needed. Text is automatically formated with commas and cursor is placed back where user left off after formatting vs cursor moving to the end of the input. Validation is on KeyUp and a final validation is done on blur.

To use just add the following to an input field:

data-type="currency"

It’s done!

Source:
1. https://codepen.io/559wade/pen/LRzEjj
2. https://flaviocopes.com/how-to-format-number-as-currency-javascript/

6 thoughts on “How to format a number as a currency value in JavaScript”

  1. Thanks for the tutorial. I’ve successfully implement it with some modification. A question though, what are this code for? Are they necessary?

    // initial caret position
    var caret_pos = input.prop(“selectionStart”);
    // put caret back in the right position
    var updated_len = input_val.length;
    caret_pos = updated_len – original_len + caret_pos;
    input[0].setSelectionRange(caret_pos, caret_pos);
    }

    Reply

  2. How can I change the update when he input value changes, for apply the format when the input has the final value taken from the DB

    Reply

Leave a Comment