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 [phone]
        ): void {
            console.log(maskFilled, extractedValue, formattedText);
        }
    }(),
    affineFormats,
    customNotations,
    affinityCalculationStrategy,
    autocomplete
);

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

Testing

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