Input Mask

Input masks allow you to easily format user input fields like dates, phone numbers, currency, and emails.

Step 1: Install InputMask

You can install InputMask via yarn.

yarn add inputmask

Step 2: Include InputMask Script

Include the InputMask JavaScript file from your local libs folder.

<!-- InputMask JS -->
<script src="../assets/libs/inputmask/jquery.inputmask.min.js"></script>

Step 3: Add Input Mask Fields

Add input fields with descriptive IDs and a comment describing the mask type.

<!-- Date format -->
<input type="text" class="form-control" id="date-format">

<!-- Phone number -->
<input type="text" class="form-control" id="phone-number">

<!-- Expty format -->
<input type="text" class="form-control" id="expty-format">

<!-- Repeating mask -->
<input type="text" class="form-control" id="repeating-mask">

<!-- Currency -->
<input type="text" class="form-control" id="currency">

<!-- IP address -->
<input type="text" class="form-control" id="ip-address">

<!-- Email address -->
<input type="text" class="form-control" id="email-address">

Step 4: Initialize InputMask

Attach input masks to each field using JavaScript.

"use strict";

$(function () {
    $("#date-format").inputmask({
        mask: "99/99/9999",
        placeholder: "mm/dd/yyyy"
    });

    $("#phone-number").inputmask({
        mask: "(999) 999-9999"
    });

    $("#expty-format").inputmask({
        mask: "99-9999999",
        placeholder: ""
    });

    $("#repeating-mask").inputmask({
        mask: "9",
        repeat: 10,
        greedy: false
    });

    $("#currency").inputmask({
        mask: "$ 999.999.999,99",
        numericInput: true
    });

    $("#ip-address").inputmask({
        mask: "999.999.999.999"
    });

    $("#email-address").inputmask({
        mask: "*{1,20}[.*{1,20}][.*{1,20}][.*{1,20}]@*{1,20}[.*{2,6}][.*{1,2}]",
        greedy: false,
        onBeforePaste: function(pastedValue) {
            return pastedValue.toLowerCase().replace("mailto:", "");
        },
        definitions: {
            "*": {
                validator: "[0-9A-Za-z!#$%&'*+/=?^_`{|}~-]",
                cardinality: 1,
                casing: "lower"
            }
        }
    });
});

For more input mask patterns and options, visit the InputMask documentation.