# How to format a number as a currency value in JavaScript

#### 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>
<title>Number Formatter</title>
<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
// 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:
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);
}

• It is required to put the caret in the correct position. like for 1,000 you put it 2nd from the left and when adding 0 to 10,000 you put it 3rd from the left.

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

• you can format the final value from DB first then set it to input element

3. Thank you for this solution. This is exactly what I was looking for. I have implemented it.