ts-input-mask


Description

ts-input-mask is a TypeScript library allowing to format user input on the fly.

Based on RadMadRobot's Input Mask Library

Mask examples

1. International phone numbers: +1 ([000]) [000] [00] [00]
2. Local phone numbers: ([000]) [000]-[00]-[00]
3. Names: [A][-----------------------------------------------------]
4. Text: [A…]
5. Dates: [00]{.}[00]{.}[9900]
6. Serial numbers: [AA]-[00000099]
7. IPv4: [099]{.}[099]{.}[099]{.}[099]
8. Visa card numbers: [0000] [0000] [0000] [0000]
9. MM/YY: [00]{/}[00]

Custom notations

Example of custom notations usage can be found in custom notations test

Installation

``
npm install ts-input-mask --save
`

Usage

#### 1. Import the listener

`
var MaskedTextChangedListener = require('ts-input-mask');

//es6
import { MaskedTextChangedListener } from 'ts-input-mask';
`

#### 2. Create instance of the listener

`
const listener: MaskedTextChangedListener = MaskedTextChangedListener.installOn(
primaryFormat, \\ format of mask: +7 ([000]) [000]-[00]-[00]
input, \\ pass HTMLInputElement here document.createElement("input") to attach the listener
new class implements MaskedTextChangedListener.ValueListener {
public onTextChanged( \\ method called when value changes
maskFilled: boolean, \\ true when mask is filled
extractedValue: string, \\ text without placeholder: 1234567890
formattedText: string \\ text with placeholder +7 (123) 456-78-90
): void {
console.log(maskFilled, extractedValue, formattedText);
}
}(),
affineFormats,
customNotations,
affinityCalculationStrategy,
autocomplete
);
`

Contributing

`
npm run test
`

#### Testing with coverage:

`
npm run test:coverage
``

Authors

* German Arutyunov

License

This project is licensed under the MIT License

Acknowledgments

* RadMadRobot's Android Input Mask Library
* RadMadRobot's iOS Input Mask Library

See also

* input-mask-angular Simple implementation of this library as angular directive