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