auto-formatter
v0.1.0
Published
auto formatter
Downloads
589
Readme
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.