<div class="card card-custom">
<div class="card-header">
<h3 class="card-title">
Input Mask Examples
</h3>
</div>
<!--begin::Form-->
<form class="form">
<div class="card-body">
<div class="form-group row">
<label class="col-form-label text-right col-lg-3 col-sm-12">Date</label>
<div class="col-lg-6 col-md-9 col-sm-12">
<input type='text' class="form-control" id="kt_inputmask_1" type="text"/>
<span class="form-text text-muted">Custom date format: <code>mm/dd/yyyy</code></span>
</div>
</div>
<div class="form-group row">
<label class="col-form-label text-right col-lg-3 col-sm-12">Custom Placeholder</label>
<div class="col-lg-6 col-md-9 col-sm-12">
<input type='text' class="form-control" id="kt_inputmask_2" type="text"/>
<span class="form-text text-muted">Date mask with custom placeholder: <code>mm/dd/yyyy</code></span>
</div>
</div>
<div class="form-group row">
<label class="col-form-label text-right col-lg-3 col-sm-12">Phone Number</label>
<div class="col-lg-6 col-md-9 col-sm-12">
<input type='text' class="form-control" id="kt_inputmask_3" type="text"/>
<span class="form-text text-muted">Phone number mask: <code>(999) 999-9999</code></span>
</div>
</div>
<div class="form-group row">
<label class="col-form-label text-right col-lg-3 col-sm-12">Empty Placeholder</label>
<div class="col-lg-6 col-md-9 col-sm-12">
<input type='text' class="form-control" id="kt_inputmask_4" type="text"/>
<span class="form-text text-muted">Phone number mask: <code>99-9999999</code></span>
</div>
</div>
<div class="form-group row">
<label class="col-form-label text-right col-lg-3 col-sm-12">Repeating Mask</label>
<div class="col-lg-6 col-md-9 col-sm-12">
<input type='text' class="form-control" id="kt_inputmask_5" type="text"/>
<span class="form-text text-muted">Mask <code>9</code>, <code>99</code> or ... <code>9999999999</code></span>
</div>
</div>
<div class="form-group row">
<label class="col-form-label text-right col-lg-3 col-sm-12">Right Align</label>
<div class="col-lg-6 col-md-9 col-sm-12">
<input type='text' class="form-control" id="kt_inputmask_6" type="text"/>
<span class="form-text text-muted">Right aligned numeric mask</span>
</div>
</div>
<div class="form-group row">
<label class="col-form-label text-right col-lg-3 col-sm-12">Currency</label>
<div class="col-lg-6 col-md-9 col-sm-12">
<input type='text' class="form-control" id="kt_inputmask_7" type="text"/>
<span class="form-text text-muted">Currency format <code>€ ___.__1.234,56</code></span>
</div>
</div>
<div class="form-group row">
<label class="col-form-label text-right col-lg-3 col-sm-12">IP Address</label>
<div class="col-lg-6 col-md-9 col-sm-12">
<input type='text' class="form-control" id="kt_inputmask_8" type="text"/>
</div>
</div>
<div class="row">
<label class="col-form-label text-right col-lg-3 col-sm-12">Email Address</label>
<div class="col-lg-6 col-md-9 col-sm-12">
<input type='text' class="form-control" id="kt_inputmask_9" type="text"/>
</div>
</div>
</div>
<div class="card-footer">
<div class="row">
<div class="col-lg-9 ml-lg-auto">
<button type="reset" class="btn btn-primary mr-2">Submit</button>
<button type="reset" class="btn btn-secondary">Cancel</button>
</div>
</div>
</div>
</form>
<!--end::Form-->
</div>
// Class definition
var KTInputmask = function () {
// Private functions
var demos = function () {
// date format
$("#kt_inputmask_1").inputmask("99/99/9999", {
"placeholder": "mm/dd/yyyy",
autoUnmask: true
});
// custom placeholder
$("#kt_inputmask_2").inputmask("99/99/9999", {
"placeholder": "mm/dd/yyyy",
});
// phone number format
$("#kt_inputmask_3").inputmask("mask", {
"mask": "(999) 999-9999"
});
// empty placeholder
$("#kt_inputmask_4").inputmask({
"mask": "99-9999999",
placeholder: "" // remove underscores from the input mask
});
// repeating mask
$("#kt_inputmask_5").inputmask({
"mask": "9",
"repeat": 10,
"greedy": false
}); // ~ mask "9" or mask "99" or ... mask "9999999999"
// decimal format
$("#kt_inputmask_6").inputmask('decimal', {
rightAlignNumerics: false
});
// currency format
$("#kt_inputmask_7").inputmask('€ 999.999.999,99', {
numericInput: true
}); //123456 => € ___.__1.234,56
//ip address
$("#kt_inputmask_8").inputmask({
"mask": "999.999.999.999"
});
//email address
$("#kt_inputmask_9").inputmask({
mask: "*{1,20}[.*{1,20}][.*{1,20}][.*{1,20}]@*{1,20}[.*{2,6}][.*{1,2}]",
greedy: false,
onBeforePaste: function (pastedValue, opts) {
pastedValue = pastedValue.toLowerCase();
return pastedValue.replace("mailto:", "");
},
definitions: {
'*': {
validator: "[0-9A-Za-z!#$%&'*+/=?^_`{|}~\-]",
cardinality: 1,
casing: "lower"
}
}
});
}
return {
// public functions
init: function() {
demos();
}
};
}();
jQuery(document).ready(function() {
KTInputmask.init();
});
