input-format
Formatting user's text input on-the-fly
Installation
npm install input-format --save
Usage
Phone number formatting example
// US phone number templateconst TEMPLATE = '(xxx) xxx-xxxx' // `parse` function parses input text characters one-by-one.//// `function parse(character, value) { return character }`//// Arguments:// * `character` is the currently parsed input text character.// * `value` is the parsed value so far.//// Returns:// * If it returns anything (not `undefined`) then it is appended to the `value`//// `parseDigit` is an exported helper `parse` function// that returns `character` if it's a digit// (a common case, e.g. phone numbers input).//// `templateParser` wrapper is a small helper// which enhances `parse` function to limit `value` max length// to the number of "x"-es in the template.//const parse = // `format` function formats parsed value.//// function format(value) { return { text: '(800) 555-3535', template: '(xxx) xxx-xxxx' } }//// Arguments:// * `value` is the parsed value to be formatted.//// Returns `{ text, template }`, where:// * `text` is the formatted text// * `template` is the template used to format the `text`// (can be a partial template or a full template)//// If the `value` couldn't be formatted then// `format()` should just return `undefined`.//// `templateFormatter` helper creates a formatter based on a template.//const format =
React Component usage
<ReactInput value=thisstatephone onChange= this parse=parse format=format/>
Lower level API (for component developers)
const input = document const inputController = input parse format onChange inputControllerinputControllerinputControllerinputController
Lowest level API
{ if valuelength < 10 if character >= '0' && character <= '9' return character } { ... // Just as an example of a return value return text: '(800) 555-3535' template: '(xxx) xxx-xxxx' } let valuelet text = '(800) 555-3535'let caret = 4 // before the first zero value caret = value === '8005553535'caret === 2 text caret = value === '(800) 555-3535'caret === 4
Android
There have been some reports of non-stock Android keyboards not handling caret positioning properly. I don't have such an Android phone at my disposal to debug that issue.
Contributing
After cloning this repo, ensure dependencies are installed by running:
npm install
This module is written in ES6 and uses Babel for ES5 transpilation. Widely consumable JavaScript can be produced by running:
npm run build
Once npm run build
has run, you may import
or require()
directly from
node.
After developing, the full test suite can be evaluated by running:
npm test
When you're ready to test your new functionality on a real project, you can run
npm pack
It will build
, test
and then create a .tgz
archive which you can then install in your project folder
npm install [module name with version].tar.gz