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

// get values as a float

// get values as an integer

// re-init
  // options

// return an integer representing the amount of decimal places the current currency has

// return the separation character currently used as a string

// return the decimal character currently used as a string

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.