Logo
Stockholm-icons / Layout / Layout-4-blocks Created with Sketch.
Stockholm-icons / Communication / Chat6 Created with Sketch.
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Tools / Compass Created with Sketch.
jquery-mask-plugin is a jQuery plugin which create an input mask. An input mask helps the user with the input by ensuring a predefined format.
This can be useful for dates, numerics, phone numbers, etc.
For more info please visit the plugin's Demo Page or Github Repo.

JQuery Mask Examples


                            <div class="card card-custom example example-compact">
                                <div class="card-header">
                                    <h3 class="card-title">
                                        JQuery Mask Examples
                                    </h3>
                                    <div class="card-toolbar">
                                        <div class="example-tools justify-content-center">
                                            <span class="example-toggle" data-toggle="tooltip" title="View code"></span>
                                        </div>
                                    </div>
                                </div>
                                <!--begin::Form-->
                                <form class="form">
                                    <div class="card-body">
                                        <div class="form-group row">
                                            <label class="col-form-label text-right col-lg-3 col-sm-12">Date</label>
                                            <div class="col-lg-6 col-md-9 col-sm-12">
                                                    <input type="text" class="form-control date" id="kt_date_input"/>
                                                <span class="form-text text-muted">Custom date format: <code>mm/dd/yyyy</code></span>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-form-label text-right col-lg-3 col-sm-12">Hour</label>
                                            <div class="col-lg-6 col-md-9 col-sm-12">
                                                <input type="text" class="form-control time" id="kt_time_input"/>
                                                <span class="form-text text-muted">Custom time format: <code>hh:mm:ss</code></span>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-form-label text-right col-lg-3 col-sm-12">Date & Hour</label>
                                            <div class="col-lg-6 col-md-9 col-sm-12">
                                                <input type="text" class="form-control date_time" id="kt_date_time_input"/>
                                                <span class="form-text text-muted">Custom date & time format: <code>mm/dd/yyyy hh:mm:ss</code></span>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-form-label text-right col-lg-3 col-sm-12">ZIP Code</label>
                                            <div class="col-lg-6 col-md-9 col-sm-12">
                                                <input type="text" class="form-control cep" id="kt_cep_input"/>
                                                <span class="form-text text-muted">Zip code mask: <code>99999-999</code></span>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-form-label text-right col-lg-3 col-sm-12">Telephone</label>
                                            <div class="col-lg-6 col-md-9 col-sm-12">
                                                <input type="text" class="form-control phone" id="kt_phone_input"/>
                                                <span class="form-text text-muted">Telephone mask: <code>9999-9999</code></span>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-form-label text-right col-lg-3 col-sm-12">Telephone with Code Area</label>
                                            <div class="col-lg-6 col-md-9 col-sm-12">
                                                <input type="text" class="form-control phone_with_ddd" id="kt_phone_with_ddd_input"/>
                                                <span class="form-text text-muted">Telephone with Code Area mask: <code>(99) 9999-9999</code></span>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-form-label text-right col-lg-3 col-sm-12">CPF</label>
                                            <div class="col-lg-6 col-md-9 col-sm-12">
                                                <input type="text" class="form-control cpf" id="kt_cpf_input"/>
                                                <span class="form-text text-muted">CPF format: <code>999.999.999-99</code></span>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-form-label text-right col-lg-3 col-sm-12">CNPJ</label>
                                            <div class="col-lg-6 col-md-9 col-sm-12">
                                                <input type="text" class="form-control cnpj" id="kt_cnpj_input"/>
                                                <span class="form-text text-muted">CNPJ format: <code>99.999.999/9999-99</code></span>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-form-label text-right col-lg-3 col-sm-12">Money</label>
                                            <div class="col-lg-6 col-md-9 col-sm-12">
                                                <input type="text" class="form-control money" id="kt_money_input"/>
                                                <span class="form-text text-muted">Money format: <code>999.999.999.999.999,99</code></span>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-form-label text-right col-lg-3 col-sm-12">Money 2</label>
                                            <div class="col-lg-6 col-md-9 col-sm-12">
                                                <input type="text" class="form-control money2" id="kt_money2_input"/>
                                                <span class="form-text text-muted">Money format: <code>_.__9,99</code></span>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-form-label text-right col-lg-3 col-sm-12">Percent</label>
                                            <div class="col-lg-6 col-md-9 col-sm-12">
                                                <input type="text" class="form-control percent" id="kt_percent_input"/>
                                                <span class="form-text text-muted">Percent format: <code>__9,99%</code></span>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-form-label text-right col-lg-3 col-sm-12">With Clear If Not Match Option</label>
                                            <div class="col-lg-6 col-md-9 col-sm-12">
                                                <input type="text" class="form-control clear-if-not-match" id="kt_clear_if_not_match_input"/>
                                                <span class="form-text text-muted">Date format: <code>mm/dd/yyyy</code></span>
                                            </div>
                                        </div>
                            
                            
                                    </div>
                                    <div class="card-footer">
                                        <div class="row">
                                            <div class="col-lg-9 ml-lg-auto">
                                                <button type="reset" class="btn btn-success mr-2">Submit</button>
                                                <button type="reset" class="btn btn-secondary">Cancel</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                                <!--end::Form-->
                            </div>
						

                            "use strict";
                            // Class definition
                            
                            var KTMaskDemo = function () {
                            
                                // private functions
                                var demos = function () {
                                    $('#kt_date_input').mask('00/00/0000', {
                                        placeholder: "dd/mm/yyyy"
                                    });
                            
                                    $('#kt_time_input').mask('00:00:00', {
                                        placeholder: "hh:mm:ss"
                                    });
                            
                                    $('#kt_date_time_input').mask('00/00/0000 00:00:00', {
                                        placeholder: "dd/mm/yyyy hh:mm:ss"
                                    });
                            
                                    $('#kt_cep_input').mask('00000-000', {
                                        placeholder: "99999-999"
                                    });
                            
                                    $('#kt_phone_input').mask('0000-0000', {
                                        placeholder: "9999-9999"
                                    });
                            
                                    $('#kt_phone_with_ddd_input').mask('(00) 0000-0000', {
                                        placeholder: "(99) 9999-9999"
                                    });
                            
                                    $('#kt_cpf_input').mask('000.000.000-00', {
                                        reverse: true
                                    });
                            
                                    $('#kt_cnpj_input').mask('00.000.000/0000-00', {
                                        reverse: true
                                    });
                            
                                    $('#kt_money_input').mask('000.000.000.000.000,00', {
                                        reverse: true
                                    });
                            
                                    $('#kt_money2_input').mask("#.##0,00", {
                                        reverse: true
                                    });
                            
                                    $('#kt_percent_input').mask('##0,00%', {
                                        reverse: true
                                    });
                            
                                    $('#kt_clear_if_not_match_input').mask("00/00/0000", {
                                        clearIfNotMatch: true
                                    });
                                }
                            
                                return {
                                    // public functions
                                    init: function() {
                                        demos();
                                    }
                                };
                            }();
                            
                            jQuery(document).ready(function() {
                                KTMaskDemo.init();
                            });
						
Custom date format: mm/dd/yyyy
Custom time format: hh:mm:ss
Custom date & time format: mm/dd/yyyy hh:mm:ss
Zip code mask: 99999-999
Telephone mask: 9999-9999
Telephone with Code Area mask: (99) 9999-9999
CPF format: 999.999.999-99
CNPJ format: 99.999.999/9999-99
Money format: 999.999.999.999.999,99
Money format: _.__9,99
Percent format: __9,99%
Date format: mm/dd/yyyy

User Profile 15 messages

Recent Notifications
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Files / File-done Created with Sketch.

Important Notice

Lorem Ipsum is simply dummy text of the printing and industry.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Design / Pen&ruller Created with Sketch.

System Update

There are many variations of passages of Lorem Ipsum available.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / General / Thunder-move Created with Sketch.

Server Maintenance

Contrary to popular belief, Lorem Ipsum is not simply random text.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Home / Alarm-clock Created with Sketch.

DB Migration

If you are going to use a passage of Lorem Ipsum, you need.

System Messages
Stockholm-icons / Communication / Group-chat Created with Sketch.
09:30 AM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / General / Attachment2 Created with Sketch.
2:45 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / Home / Library Created with Sketch.
3:12 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / Communication / Add-user Created with Sketch.
7:05 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Privacy Settings:

After you log in, you will be asked for additional information to confirm your identity.

Security Settings:

After you log in, you will be asked for additional information to confirm your identity. For extra security, this requires you to confirm your email. Learn more.

Stockholm-icons / Navigation / Up-2 Created with Sketch.

Select A Demo

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9