Static Mask Basic

Input mask are use with inputtags.

<input id="elementId" type="text" class="form-control" placeholder=""> 
$('#static-mask1').inputmask("99-9999999");$('#static-mask2').inputmask({mask: "aa-9999"});

Alternate masks 

$("#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 

$('#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 

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

Email 

// 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 

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

Phone 

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

Currency 

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

Methods

Repeat 

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

setvalue 

// 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 

// 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 

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

On InComplete 

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

On cleared 

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

Copyright © 2020 DesignReset, All rights Reserved .

Coded with