Change the number format in the input text

Question

I want to change the number format with (,) in thousands, for example 2000 to 2,000 20000 to 20,000 and so on. I have tried to browse and I found a suitable library that is cleave.js, but there is one problem in this library which is that I can only recognize one selector, while there are lots of input texts that I want to change, does anyone have another solution?

var cleave = new Cleave('.loan_max_amount', {
    numeral: true,
    numeralThousandsGroupStyle: 'thousand'
});

What do you mean, one selector? `'.loan_max_amount'` will target all inputs that have the `loan_max_amount` class, there can be as many as you want — Jeremy Thille, Jan 16 '20 at 07:23
@Newbie123 added the answer kindly check, no need to have a library to show to the ui — Learner, Jan 16 '20 at 07:24
yes one selector will select all the classes that exist, and change it to the format that I want — Newbie 123, Jan 16 '20 at 07:25
You can select the elements using document.querySelectorAll(), loop through it and format the value for each selector — shrekDeep, Jan 16 '20 at 07:28

score 2 · Answer 1 · answered Jan 16 '20 at 07:24

You can use Intl.NumberFormat

const number = 123456.789;

console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number));
// expected output: "123.456,79 €"

// the Japanese yen doesn't use a minor unit
console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(number));
// expected output: "￥123,457"

// limit to three significant digits
console.log(new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(number));
// expected output: "1,23,000"

It's not from cleave.js but you can find it here: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat

Nick Parsons · Accepted Answer · 2020-01-16T07:30:34.353

You can only apply a cleave instance to one element at a time:

.input-element here is a unique DOM element. If you want to apply Cleave for multiple elements, you need to give different CSS selectors and apply to each of them, effectively, you might want to create individual instance by a loop

- Cleave Documentation

Following this advice, you can achieve this by using .querySelectorAll() with .forEach() to loop over all elements with your class and apply a cleave instance to each element like so:

document.querySelectorAll('.loan_max_amount').forEach(inp => new Cleave(inp, {
  numeral: true,
  numeralThousandsGroupStyle: 'thousand'
}));

<script src="https://cdn.jsdelivr.net/npm/cleave.js@1.5.3/dist/cleave.min.js"></script>

<input type="text" class="loan_max_amount" />
<input type="text" class="loan_max_amount" />

Learner · Answer 3 · 2020-01-16T07:29:19.980

0

you can use toLocaleString()

Sample snippet

var n = 34523453.345
let seperated = n.toLocaleString()
console.log(seperated)

The problem in this one is basically return is a string, or you can check this library Numeral.js might be interesting.

Or as David Japan Suggested you can use Intl.NumberFormat

Sample snippet

let number = 123000
console.log(new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(number));

edited Jan 16 '20 at 07:29

answered Jan 16 '20 at 07:22

Learner

8,379
7
44
82

1

Doesn't better `new Intl.NumberFormat` ? – David Japan Jan 16 '20 at 07:25
Yes me too ! I didn't know toLocaleString is working like this before :> Thz. – David Japan Jan 16 '20 at 07:28

score 0 · Answer 4 · answered Jan 16 '20 at 07:26

You can do something like this.

//jQuery
$(".test").on('keyup', function(){
    var n = parseInt($(this).val().replace(/\D/g,''),10);
    $(this).val(n.toLocaleString());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="test" id="formattedNumberField" value="" />
<input type="text" class="test" id="formattedNumberField1" value="" />

score 0 · Answer 5 · answered Jan 16 '20 at 07:29

0

You don't need to add library for this, you can achieve it with simple regex.This also works for decimal numbers.

const formatNumber = (num)=> {
  return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
}

answered Jan 16 '20 at 07:29

1

`Intl.NumberFormat` e.g isn't a library. It's also a object like `new RegExp()` – Maximilian Fixl Jan 16 '20 at 07:35

Change the number format in the input text

5 Answers5