Automatically add a comma between numbers in number type input

JavaScript
1

Hi there,

I am wanting to create an input field with a number type which allows users to enter a monetary value.

I would like to know the best way to automatically add a comma between thousand units entered.

For example, if £10000 is entered, it would automatically change to £10,000 or if £120000 is entered, it would be £120,000

Any ides would be great.

Thanks

2

The following currency mask looks to do a good job.

You just have to configure it with the appropriate prefix, decimal, and thousands separator.

For example:

SimpleMaskMoney.setMask('#currency',{
    prefix: '£',
    decimalSeparator: '.',
    thousandsSeparator: ','
});
1 Like
3

Hi,

Thanks for the reply.

How do you mean I need to configure it?- Do I need to add additional code?

I now have the following:

<input placeholder="£" id="current-value" type="text" class="validate">
 <label for="current-value">Current value</label>

<script>
SimpleMaskMoney.setMask('#current-value',{
prefix: '£',
decimalSeparator: '.',
thousandsSeparator: ',';
</script>

I’ve tried the input field as both text type and number type, but it didn’t make a difference.

Thanks

4

If you look at the documentation on the Money(Currency) page you’ll see that there’s a How to use it: section that says that you need to import the simple-mask-money script into the document.

I see that it looks to be missing in your code.

Add this script tag before your script code.

<script src="simple-mask-money.js"></script>
5

Many thanks! I got it working now.

The only issue I have is that it is adding a comma at the end of the value when inputted.

This is what I have now:


<script src="assets/js/simple-mask-money.js"></script>
	<script>
	let input = SimpleMaskMoney.setMask('#current-property-value',{
    prefix: '£',
    suffix: '',
    fixed: true,
    fractionDigits: 0,
    decimalSeparator: ',',
    thousandsSeparator: ',',
    emptyOrInvalid: () => {
      return this.SimpleMaskMoney.args.fixed
        ? `0${this.SimpleMaskMoney.args.decimalSeparator}00`
        : `_${this.SimpleMaskMoney.args.decimalSeparator}__`;
    }
});
</script>

 <input placeholder="£" id="current-property-value" type="text"   class="validate">
									  <label for="first_name">Current property value</label>
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.