Easy & Fast Input Mask Library – PureMask.js

Preview:

Description:

PureMask.js is a lightweight, blazing-fast, and easy-to-use input mask library for form fields. Written in vanilla JavaScript and works with no 3rd-party libraries.

It can be helpful in improving the user experience by guiding the user as they enter data, for example, credit card numbers, phone numbers, dates/times, and other types of data that have a specific format.

How to use it:

1. Download and insert the PureMask.js library into your document.

<script src="puremask.min.js"></script>

2. Call the function PureMask.format on the target form fields and pass in a string that represents the mask you want to use as follows:

<input type="text" class="mask data-com-hora" data-mask="##/##/#### ##:##">
<input type="text" class="mask data" data-mask="##/##/####">
<input type="text" class="mask tempo" data-mask="##:##:##">
<input type="text" class="mask tempo-com-siglas" data-mask="##h##m">
<input type="text" class="mask CEP" data-mask="#####-###">
<input type="text" class="mask telefone-DDD" data-mask="(##) ####-####">
<input type="text" class="mask CPF" data-mask="###.###.###-##">
<input type="text" class="mask CNPJ" data-mask="##.###.###/####-##">
<input type="text" class="mask dinheiro" data-mask="###.###.###.###.###.###,##">
<input type="text" class="mask mixed" data-mask="NNNN ###-###">
<input type="text" class="mask placa-carro" data-mask="AAA ####">
<input type="text" class="mask placa-carro-novo" data-mask="AAA#A##">

PureMask.format('.mask');

3. Determine whether to enable input placeholder.

PureMask.format('.mask', true);

Changelog:

01/09/2022

• cleanup