Basic Methods

#### Static Mask Basic

Input mask are use with `input` tags.

`<input id="elementId" type="text" class="form-control" placeholder="">`
99-9999999
aa-9999

    $('#static-mask1').inputmask("99-9999999");
    $('#static-mask2').inputmask({mask: "aa-9999"});

#### Alternate masks

["99.9", "X"]
(99.9)|(X)

    $("#alternate-masks1").inputmask({
      mask: ["99.9", "X"],
      definitions: {
        "X": {
          validator: "[xX]",
          casing: "upper"
        }
      }
    });

    $("#alternate-masks2").inputmask("(99.9)|(X)", {
      definitions: {
        "X": {
          validator: "[xX]",
          casing: "upper"
        }
      }
    });

#### Dynamic Syntax

9-a{1,3}9{1,3}
aa-9{4}
aa-9{1,4}

    $('#dynamic-syntax-1').inputmask("9-a{1,3}9{1,3}"); //mask with dynamic syntax
    $('#dynamic-syntax-2').inputmask("aa-9{4}");  //static mask with dynamic syntax
    $('#dynamic-syntax-3').inputmask("aa-9{1,4}");  //dynamic mask ~ the 9 def can be occur 1 to 4 times

#### Date

dd/mm/yyyy
99-99-9999
99 December, 9999

    // Date

    $("#date").inputmask("99/99/9999");
    $("#date2").inputmask("99-99-9999");
    $("#date3").inputmask("99 December, 9999");

#### Email

john@mail.com

    // Email

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

#### IP

192.198.1.1

    // IP Address

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

#### Phone

(999) 999-9999

    // Phone Number

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

#### Currency

$999,9999,999.99

    // Currency

    $("#currency").inputmask({mask:"$999,9999,999.99"});

#### Methods

#### Repeat

mask 9999999999

    // Repeater

    $("#repeater").inputmask({ "mask": "2", "repeat": 4});  // ~ mask "9999999999"

#### setvalue

Value is set as test@mail.com

    // Set Default Value

    $("#setVal").inputmask(
        {
            mask:"*{1,20}[.*{1,20}][.*{1,20}][.*{1,20}]@*{1,20}[.*{2,6}][.*{1,2}]",
            greedy:!1,onBeforePaste:function(m,a){return(m=m.toLowerCase()).replace("mailto:","")},
            definitions:{"*":
                {
                    validator:"[0-9A-Za-z!#$%&'*+/=?^_`{|}~-]",
                    cardinality:1,
                    casing:"lower"
                }
            }
        }
    )
    $('#setVal').on('focus', function(event) {
        $(this).inputmask("setvalue", 'test@mail.com');
    });

#### isComplete

The mask is already filled

    // isComplete

    $("#isComplete").inputmask({mask:"999.999.999.99"})
    $("#isComplete").inputmask("setvalue", "117.247.169.64");
    $('#isComplete').on('focus keyup', function(event) {
        event.preventDefault();
        if($(this).inputmask("isComplete")){
            $('#isCompleteHelp').css('display', 'block');
        }
    });
    $('#isComplete').on('keyup', function(event) {
        event.preventDefault();
        if(!$(this).inputmask("isComplete")){
            $('#isCompleteHelp').css('display', 'none');
        }
    });

#### OnComplete

You have successfully completed the mask

    // On Complete

    $("#oncomplete").inputmask("99/99/9999",{ oncomplete: function(){ $('#oncompleteHelp').css('display', 'block'); } });

#### On InComplete

Incomplete Input Field

    // On InComplete
    $("#onincomplete").inputmask("99/99/9999",{ onincomplete: function(){ $('#onincompleteHelp').css('display', 'block'); } });

#### On cleared

Plese fill out the field

    // On Cleared
    $("#oncleared").inputmask("99/99/9999",{ oncleared: function(){ $('#onclearedHelp').css('display', 'block'); } });