jQuery Plugin For Formatting User Input with Specified Pattern - formatter.js

formatter.js is an useful and flexible jQuery plugin used to format user input to match a specified pattern with custom formatted characters. Ideal for credit card, phone number, currency and zip code form formatting.

Basic Usage:

1. Load the jQuery javascript library and formatter.js at the end of your document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="lib/jquery.formatter.min.js"></script>

2. Create different types of input.

<h2>Demo 1 Credit Card</h2>
<input type="text" class="input" id="demo1" maxlength="30">
<h2>Demo 2 Phone Number</h2>
<input type="text" class="input" id="demo2" maxlength="30">
<h2>Demo 3 Currency</h2>
<input type="text" class="input" id="demo3" maxlength="30">

3. Create the patterns and formatted characters in the javascript.

<script>
$('#demo1').formatter({
  'pattern': '{{9999}}-{{9999}}-{{9999}}-{{9999}}'
});
$('#demo2').formatter({
  'pattern': '({{999}}) {{999}}-{{9999}}',
  'persistent': true // always displays the formatted character.
});
$('#demo3').formatter({
  'pattern': '$ {{99999}}',
  'persistent': true // always displays the formatted character.
});
</script>

---

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