Auto Number Formatter With Pure JavaScript – Finput

Finput is a pure JS library that automatically formats numerical values and prevents invaid keys for your currency/money inputs.

How to use it:

Just include the Finput library on the webpage and you’re ready to go.

<script src="finput.min.js"></script>

Attach the Finput to the target input field as follow:

<input type="text" id="finput-default">

var finputDefault = document.getElementById('finput-default');
finput(finputDefault);

Possible options to customize the Finput.

finput(finputDefault,{
  // Maximum number of decimal digits
  scale: 2,
  // The possible range of values
  // 'ALL': Number can take any value
  // 'POSITIVE': Number can only be positive
  range: n.RANGE.ALL,
  // If true, after focus is lost value is formatted to scale number of decimal places
  fixed: true,
  // The character used to separate thousands
  thousands: ",",
  // The character used for the decimal point
  decimal: ".",
  // An object mapping of shortcuts that the user can use to quickly enter common values.
  shortcuts: {
      k: 1e3,
      m: 1e6,
      b: 1e9
  },
  // Callback
  invalidKeyCallback: function() {}
  
});

Changelog:

04/27/2019

• Bugfixed

10/12/2018

• Have values match initial values when all input deleted

08/12/2018

• fix: prevent setRawValue to convert 0 to empty string