Press "Enter" to skip to content

Create HTML Currency Inputs with Various Different Currencies and Formattings | intl-currency-input.js

intl-currency-input is an easy-to-use dependency-free vanilla JavaScript add-on that allows you to generate HTML currency inputs in different currencies and formats. It does not require any additional coding or style sheets.

bootstrap currency input, input currency format, currency input, html input currency with comma, currency formatter, currency picker, intl currency input

How to make use of it:

1. Install & download with NPM.

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

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

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

3. Initialize the CurrencyInput on an input field and specify the preliminary worth:

<input type="text" class="example" placeholder="CSS Script" />
const myInput = new CurrencyInput('.example', {
      defaultValue: 1000
});

4. Set the currency symbol/name and the variety of decimal locations by inserting the currency code (ISO 4217) into the foreign money attribute.

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

5. Set the show 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 forestall the consumer from coming into decimal numbers.

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

9. Determine whether to stop the user from coming into values from IME.

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

10. Callback features.

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

11. API strategies.

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

International Currency Input, intl-currency-input Plugin/Github


See Demo And Download

Official Website(konstantin-lukas): Click Here

This superior jQuery/javascript plugin is developed by konstantin-lukas. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.