International Currency Input In JavaScript – intl-currency-input.js

Preview:

Description:

An international currency input JavaScript library that automatically formats numeric values as currencies.

How to use it:

1. Install & download with NPM.

# NPM
$ npm i intl-currency-input --save

2. Import the intl-currency-input.js into the document.

<script src="intl-currency-input.min.js"></script>

3. Initialize the CurrencyInput on an input field and specify the initial value:

<input type="text" class="example" placeholder="CSS Script" />

const myInput = new CurrencyInput('.example', {
      defaultValue: 1000
});

4. Set the currency symbol/name and the number of decimal places by inserting the currency code (ISO 4217) into the currency attribute. Default: ‘USD’.

const myInput = new CurrencyInput('.example', {
      locale: 'fr',
      currency: 'EUR',
});

5. Set the display mode. Can be ‘symbol’ (default), ‘name’, ‘code’, and ‘none’.

const myInput = new CurrencyInput('.example', {
      currencyDisplay: 'name',
      currencyDisplayFallback: 'name'
});

6. Set the min/max values allowed to enter.

const myInput = new CurrencyInput('.example', {
      max: 1000,
      min: -10,
});

7. Customize the separator and decimal characters.

const myInput = new CurrencyInput('.example', {
      separationCharacter: ' ',
      decimalCharacter: ',',
});

8. Determine whether to prevent the user from entering decimal numbers. Default: true.

const myInput = new CurrencyInput('.example', {
      disableCents: false
});

8. Determine whether to prevent the user from entering values from IME. Default: true.

const myInput = new CurrencyInput('.example', {
      preventInputFromIME: false
});

9. Callback functions.

const myInput = new CurrencyInput('.example', {
      validCallback: function () { 
        // valid
      },
      invalidCallback: function () {
        // invalid
      }
});

10. API methods.

// get values as a string
myInput.getValueAsString(); 
// get values as a float
myInput.getValueAsFloat()
// get values as an integer
myInput.getValueAsInt();
// re-init
myInput.reinit({
  // options
});
// return an integer representing the amount of decimal places the current currency has
myInput.getCurrencyDecimalCount();
// return the separation character currently used as a string
myInput.getSeparationCharacter();
// return the decimal character currently used as a string
myInput.getDecimalCharacter();

Changelog:

10/17/2021

• JS update