CODEWITHSUNDEEP
javascriptjqueryjavascript-objectscleave
Newbie 123
Newbie 123

Reputation: 274

Change the number format in the input text

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'
});

Upvotes: 0

Views: 11891

Answers (5)

Nick Parsons
Nick Parsons

Reputation: 50954

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/[email protected]/dist/cleave.min.js"></script>

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

Upvotes: 2

user10828808
user10828808

Reputation:

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,')
}

Upvotes: 0

Beginner
Beginner

Reputation: 9135

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));

Upvotes: 0

Chetan Patel
Chetan Patel

Reputation: 782

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="" />

Upvotes: 0

Maximilian Fixl
Maximilian Fixl

Reputation: 688

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

Upvotes: 2

Related Questions