the-masker v1.0.10

The Masker

This is an input masking package, and it was made with javascript. Works on both vanilla and framework projects.

Get Started

Install my-project with npm

  npm install the-masker

To use it, import it on your entry point .js/.ts file.

    import {applyMask} from "the-masker";
    // if you render anything via js, render it before executing the next line
    applyMask();

Documentation

Custom Mask - Usage

*Special characters and spaces are not replaced. ** The mask will be applied only on keyup fired on maskable inputs.

You need only to change the html you want to mask.

Maskable inputs must:

• be of type text
• contain the class "masked"
• contain attribute mask

Example:

<input type="text" class="masked" mask="99/99/99">

This input will accept only numbers.

User input: 10122000

Output: 10/12/2000

Other Examples

• Mixed digits, uppercase, lowercase and special characters

<input type="text" class="masked" mask="99-AA-9a">

• Brazilian phone number

<input type="text" class="masked" mask="(99) 9 9999-9999">

• Credit card number

<input type="text" class="masked" mask="9999 9999 9999 9999">

Template Mask - Usage

Use it the same way you would use the custom mask. Add the class "masked" and type the mask name in the mask attribute.

Regex Mask - Usage

You'll need only regex knowledge to apply it directly on the HTML.

IMPORTANT

• Pass the regex without the delimiters //. E.g.: Instead of /[0-9]{0,5}/, pass only [0-9]{0,5}
• Regex here needs to be carefully handled, otherwise it will not work.
• Make sure to divide the regex in groups.
  • Example 1: You want an input of three letters only:
    • Normal regex: /[A-z]{3}/
    • The Masker regex: ([A-z]{1,3})

    • Explanation: You need to allow at least one letter to match the group regex and the maximum will be 3.

  • Example 2: You want an input like this: 123 AB 567
    • Normal regex: /(\d{0,3})?(\s)?([A-Z]{2})?(\s)?(\d{4})?/
    • The Masker regex: (\d{1,3})?(\s)?([A-Z]{1,2})?(\s)?(\d{1,4})?
    • Explanation: It's important to determine the min and the max for each group of characters; instead of saying A-Z accepts up to 2 chars, you need to specify the min to 0 or 1, otherwise, the output will block further entries. This happens because the method checks each character typed and if it's not a match, it keeps returning the string with the correct format.

Example:

<input type="text" class="masked" regex="(\d{0,3})?(\s)?([A-Z]{1}[A-Z]{0,1})?(\s)?(\d{1}\d{0,1}\d{0,1}\d{0,1})?">

This input will accept numbers and uppercase letters.

User input: 123AZ2121

Output: 123 AZ 2121

<input type="text" class="masked" regex="([a-z]{1,3})?(_)?([a-z]{1,3})?(_)?([a-z]{1,3})?">

This input will accept lowercase letters.

User input: abcdefghi

Output: abc_def_ghi

Feedback/Suggestions

If there are any bugs or if you would like to suggest an improvement, feel free to open an issue and I'll check it out asap.

Roadmap

• Support regex masks

• Add pre-made templates to be called only by its name. Ex.: mask="phone-br-9" is the same as mask="(99) 9 9999-9999"

• Allow user to use any class they want instead of .masked