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'); } });
Copyright © 2021 DesignReset, All rights reserved.
Coded with