jQuery Plugin For Number Entry Input - iNumberEntry

iNumberEntry is a jQuery number entry plugin which converts the normal input field into multiple subfields for easier number input. Supports custom prefix, postfix, number format, step size, and min/max values. Also can be used for date/time input, photo number input, Social Security Number input and much more.

See also:

• jQuery Widget For Date Entry and Validation - datetextentry
• jQuery Plugin for Input Field Date Format and Spinner - Date Entry
• jQuery Plugin for Input Field Time Format and Spinner - Time Entry

Basic usage:

1. Import both jQuery JavaScript library and the jQuery iNumberEntry plugin's script into the document.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery.iNumberEntry.js"></script>

2. Create a normal input on the web page.

<input id="demo">

3. Initialize the plugin on the input field and specify the number format for the number entry.

$("#demo").iNumberEntry({
  numberParts: [
    {
      length: 3,
      prefix: "(",
      postfix: ") ",
      value: "123",
      maxValue: -1,
      minValue: 0,
      step: 1,
      snapToStep: false, // snaps the numeric value to the closest "step"
      toString: function(){}, // returns the formatted NumberPart
      totalLength: function(){} // returns the total length
    },
    {
      length: 3,
      postfix: "-",
      value: "456"
    },
    {
      length: 4,
      value: "7890"
    }
  ]
});

4. More configuration options.

$("#demo").iNumberEntry({

  // If true, the NumberPart "value" will be linked to the previous NumberPart "value", which will adjust depending on "minValue" and "maxValue". 
  // For example, a date entry of 12/01 will become 11/30 when decreasing the day part.
  linked: false,

  // default value
  defaultValue: null
  
});

5. The plugin also provides several quick references to format/mask/validate phone numbers, dates and SSN.

// for date entry
// format: mm/dd, mm/dd/yy, mm/dd/yyyy
$("#demo").iDateNumberEntry(format, option);

// for time entry
// format: hh:mm, hh:mm:ss
$("#demo").iTimeNumberEntry(format, option);

// ISO date entry
$("#demo").iDateIsoNumberEntry(option);

// SSN entry
$("#demo").iSocialSecurityNumberEntry(option);

---

This awesome jQuery plugin is developed by irdsinc. For more Advanced Usages, please check the demo page or visit the official website.