auto-formatter

Format as you type.

• phone number (XXX) XXX-XXXX, XXXXX-XXXXX
• credit card number XXXX XXXX XXXX XXXX, XXXX XXXXXX XXXXX
• date DD/MM/YYYY, MM/DD/YYYY, YYYY/MM/DD

Usage:

<input type="tel" id="mobile-number" value="1234567890" data-format="(XXX) XXX-XXXX">
<script src="path/to/auto-formatter.js"></script>
<script>
var phoneNumberFormatter;

phoneNumberFormatter = new AutoFormatter({
  targetNode: document.querySelector('#phone-number'),
  limitToMaxLength: true
});
phoneNumberFormatter.enableFormatting();

AutoFormatter.format({
  value: '1234567890',
  format: 'XXXXX-XXXXX'
}); // 12345-67890
</script>

API

/*
 * create an instance of autoformatter
 * by passing the targetNode and optional limitToMaxLength (true|false) flag
 * if limitToMaxLength === true is passed, the `maxlength` attribute,
 * with `length of the format` will be added to the targetNode
 * and formatted value will be trimmed to `length of the format`
 * if limitToMaxLength is passed as true, recurringPattern will not have any effect
 */
targetNodeFormatter = new AutoFormatter({
  targetNode: targetNode, // DOM Node
  limitToMaxLength: limitToMaxLength, // optional - true | false
  recurringPattern: recurringPattern, // optional - true | false
  direction: direction // optional - 'ltr' || 'rtl'
})

/*
 * enable formatting on the targetNode
 * if the targetNode has existing value, it would format and update the existing value
 * format as you type will be enabled on this node
 */
targetNodeFormatter.enableFormatting();

/*
 * disable formatting on the targetNode
 * if the targetNode has existing value, it would un-format and update the existing value
 * format as you type will be disabled on this node
 */
targetNodeFormatter.disableFormatting();

/*
 * format a value
 * as per the desired format
 * if limitToMaxLength is passed as true, recurringPattern will not have any effect
 */
AutoFormatter.format({
  value: value,
  format: format,
  limitToMaxLength: limitToMaxLength, // optional - true | false
  recurringPattern: recurringPattern, // optional - true | false
  direction: direction // optional - 'ltr' || 'rtl'
})

License

Copyright 2015, Yahoo Inc. Copyrights licensed under the MIT License. See the accompanying LICENSE file for terms.