auto-formatter

0.1.0 • Public • Published

auto-formatter

build status coverage status sauce test status

sauce browser matrix

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

animated demo

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.

Readme

Keywords

Package Sidebar

Install

npm i auto-formatter

Weekly Downloads

96

Version

0.1.0

License

MIT

Last publish

Collaborators

  • sarbbottam