Developer-friendly Input Mask & Validation Library – smask

Preview:

Description:

smask is a developer-friendly input mask JavaScript library that helps format & validate values (like currency values, phone numbers) as a user type in an input field.

How to use it:

1. Import needed modules from the smask.js.

import {currency, decimal, mask, maskInput, unmask} from "./smask.js";

2. Automatically format telephone numbers in a tel input field.

<input id="tel" name="tel" type="tel" inputmode="numeric" autocomplete="tel" placeholder="(00) 00000-0000" data-mask="(dd) ddddd-dddd" required />

// or
const phone = mask("71987654321", "(dd) ddddd-dddd");
console.log("Cell phone: ", phone);

// or
maskInput(document.getElementById("phone"), "(dd) ddddd-dddd");

3. Unmask a numeric value.

const postalCodeUnmasked = unmask("12345-678", "ddddd-ddd");
console.log("Postal Code (unmasked): ", postalCodeUnmasked);

4. Format decimal and currency values:

const numberFormat = decimal("123456");
console.log("Number: ", numberFormat);
=> 123.456
const currencyFormat = currency("1234.56");
console.log("Currency: ", currencyFormat);
=> R$ 1.234,56

maskInput(document.getElementById("decimal"), "decimal");
maskInput(document.getElementById("currency"), "currency");

Changelog:

v1.1.21 (03/17/2022)

• refactor

v1.1.15 (12/12/2021)

• Performance improvements

v1.1.13 (08/01/2021)

• Update

v1.1.10 (07/14/2021)

• Refactoring

v1.1.6 (07/10/2021)

• Refactoring

v1.1.2 (06/30/2021)

• Refactoring

v1.1.1 (06/26/2021)

• Refactoring

v1.0.13 (06/22/2021)

• Refactoring

v1.0.6 (06/18/2021)

• Refactoring