Static Mask Basic
Input mask are use with input
tags.
<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").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
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'); } });
© 2021 DesignReset
Coded with
Alan Green
Lead Developer
Todo
Launch New Seo Wordpress Theme has been moved to Completed Board by Alma Clark
New Task is added by Ernest Reeves
Dinner with Kelly Young has been moved to Completed Board by Dale Butler
Event Notifications
New Event has been added on 15 Dec 2020
Collect documents from Kelly at the restaurant tommorrow.
Meeting Event on 12 Nov has been updated to 8 PM
New Event Seminar organised by Design Reset will be held on 25 January
Today's Conference is Cancelled.
Meeting with Project Lead on 01 Jan has been updated to 15 Jan