<div class="card card-custom">
<div class="card-header">
<h3 class="card-title">
Input Mask Examples
</h3>
</div>
<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>
</div>
var KTInputmask = function () {
var demos = function () {
$("#kt_inputmask_1").inputmask("99/99/9999", {
"placeholder": "mm/dd/yyyy",
autoUnmask: true
});
$("#kt_inputmask_2").inputmask("99/99/9999", {
"placeholder": "mm/dd/yyyy",
});
$("#kt_inputmask_3").inputmask("mask", {
"mask": "(999) 999-9999"
});
$("#kt_inputmask_4").inputmask({
"mask": "99-9999999",
placeholder: ""
});
$("#kt_inputmask_5").inputmask({
"mask": "9",
"repeat": 10,
"greedy": false
});
$("#kt_inputmask_6").inputmask('decimal', {
rightAlignNumerics: false
});
$("#kt_inputmask_7").inputmask('€ 999.999.999,99', {
numericInput: true
});
$("#kt_inputmask_8").inputmask({
"mask": "999.999.999.999"
});
$("#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 {
init: function() {
demos();
}
};
}();
jQuery(document).ready(function() {
KTInputmask.init();
});
