jQuery Plugin For Number Entry Input - iNumberEntry

jQuery Plugin For Number Entry Input - iNumberEntry
File Size: 17.7 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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:

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

  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.


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

// SSN entry

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