jQuery | Mask Plugin

Last Updated : 17 Dec, 2019

jQuery mask is a jQuery plugin that helps in putting on a mask on the basic HTML input fields and other elements. If the developer wants the input field to take inputs in a certain format only, then they can use the jQuery mask plugin for it. This type of functionality can also be created using a back end language like PHP. However, it will be much more time and memory efficient if it's taken care of at the front end itself. For example, suppose the developer wants the users to enter their 10 digits mobile number in the format of (xxx)-xxx-xxxx. They can specify this format using jQuery Mask and the input box field will take the numbers, automatically in the defined format. All the developer has to do is select the appropriate input box using the jQuery selector $, and then specify the desired format using the mask() feature. Mask Transitions: The default available mask transitions are:

‘0’: {pattern: /\d/}
‘A’: {pattern: /[a-zA-Z0-9]/}
‘9’: {pattern: /\d/, optional: true}
‘S’: {pattern: /[a-zA-Z]/}
‘#’: {pattern: /\d/, recursive: true}

CDN Link

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.js" 
        
        crossorigin="anonymous"
></script>

This link must be included in the index page to make the jQuery mask functionalities work. Example:

html

<!Doctype html>
<html lang="en">

<head>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,
                initial-scale=1,
                shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous">
    
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous">
    </script>
    
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.js"
            integrity=
"sha256-yE5LLp5HSQ/z+hJeCqkz9hdjNkk1jaiGG0tDCraumnA="
            crossorigin="anonymous">
    </script>
    
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            integrity=
"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
            crossorigin="anonymous">
    </script>
    
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity=
"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
            crossorigin="anonymous">
    </script>
    
    <style>
        body {
            padding: 2%;
        }
    </style>
</head>

<body>
    <h2>jQuery Mask</h2>
    <br>
    
    <p>
        <label>
            Date Example
            <input type="text"
                name="date" />
        </label>
    </p>

    <p>
        <label>
            ZIP Code Example
            <input type="text"
                name="zip-code" />
        </label>
    </p>

    <p>
        <label>
            Mobile Number Example
            <input type="text"
                name="mobile-number" />
        </label>
    </p>

    <p>
        <label>
            Policy Number Example
            <input type="text"
                name="policy-number"
                data-mask="00-00-0000-0000" />
        </label>
    </p>

    <script>
        $('input[name="date"]').mask('0000/00/00');
        $('input[name="zip-code"]').mask('S0S 0S0');
        $('input[name="mobile-number"]').mask('(00) 0000 0000');
        $('input[name="postal-code"]').focusout(function() {
            $('input[name="postal-code"]').val(this.value.toUpperCase());
        });
    </script>
</body>

</html>

Output

Explanation:

Date: In the above source code, it can be seen that the input format for the date is specified as 0000/00/00. Now, the user enter the date numbers, and the input field will automatically take the numbers in the format specified.
ZIP Code: Similarly for postal code, the format specified is S0S 0S0. After that a function is created that will change all the lowercase values entered into uppercase format automatically.
Mobile Number: The format specified is (00) 0000 0000. The small bracket and proper spacing will automatically get applied once the user starts entering his mobile number.
Policy Number: The inline HTML format specified is 00-00-0000-0000. The policy number gets automatically entered in this specified format.

jQuery | Mask Plugin

sanchit496

Improve

Article Tags :

jQuery | Mask Plugin

Similar Reads

Thank You!

What kind of Experience do you want to share?