InputMask
Inputmask is a javascript library that creates an input mask. Inputmask can run against vanilla javascript, jQuery, and jqlite.
For more, please visit the plugin's documentation .Preview
Custom date format: mm/dd/yyyy
Phone number format: (999) 999-9999
Phone number format with placeholder: (999) 999-9999
Currency format : $ ___.___.123,45
Custom format : 999.999.999,99
Custom format : ___@___
<div class="mb-3">
<label for="" class="form-label">Date</label>
<input class="form-control" id="lpx_inputmask_1" type="text" />
<small>Custom date format: <span class="text-brand">mm/dd/yyyy</span></small>
</div>
<div class="mb-3">
<label for="" class="form-label">Phone number</label>
<input class="form-control" id="lpx_inputmask_2" type="text" />
<small
>Phone number format: <span class="text-brand">(999) 999-9999</span></small
>
</div>
<div class="mb-3">
<label for="" class="form-label">Placeholder</label>
<input class="form-control" id="lpx_inputmask_3" type="text" />
<small
>Phone number format with placeholder:
<span class="text-brand">(999) 999-9999</span></small
>
</div>
<div class="mb-3">
<label for="" class="form-label">Currency</label>
<input class="form-control" id="lpx_inputmask_4" inputmode="number" />
<small
>Currency format : <span class="text-brand">$ ___.___.123,45</span></small
>
</div>
<div class="mb-3">
<label for="" class="form-label">IP Address</label>
<input class="form-control" id="lpx_inputmask_5" inputmode="number" />
<small>Custom format : <span class="text-brand">999.999.999,99</span></small>
</div>
<div class="mb-3">
<label for="" class="form-label">Email Address</label>
<input class="form-control" id="lpx_inputmask_6" inputmode="number" />
<small>Custom format : <span class="text-brand">___@___</span></small>
</div>
Inputmask({ mask: "99/99/9999" }).mask(
document.getElementById("lpx_inputmask_1")
);
Inputmask({ mask: "(999) 999-9999" }).mask(
document.getElementById("lpx_inputmask_2")
);
Inputmask({ mask: "(999) 999-9999", placeholder: "(999) 999-9999" }).mask(
document.getElementById("lpx_inputmask_3")
);
Inputmask({ mask: "$ 999.999.999,99", numericInput: true }).mask(
document.getElementById("lpx_inputmask_4")
);
Inputmask({ mask: "999.999.999.99" }).mask(
document.getElementById("lpx_inputmask_5")
);
