JavaScript input mask
The new input mask plugin brings a much better user experience. Now it considers the special keys, selections, and other user non-input actions on input elements with any JavaScript mask. In the newer version, it is possible to mask DIV.contentEditable HTML elements, and also it brings Excel-like mask options. The JavaScript mask integrates the user key down through events. Define the data-mask property in your input fields to start using.
- React, Angular, Vue compatible;
- Mobile friendly;
- Date picker;
- Time picker;
- Year-month picker;
- Several events and easy integration;
- JS plugin or web component;
Examples
Using mask in HTML form elements
What is your birthday? (Mask: dd/mm/yyyy)
US Format (Mask: US #.##0,00)
Percent mask (Mask: 0%)
How many liters (Mask: 0.00 liters)
EURO French Format (Mask: # ##0,00 €)
Using mask on contentEditable elements
Enter the currency price (Mask: U$ #.##0,00)
<html>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<div contentEditable='true' data-mask='U$ #.##0,00' style='border: solid 1px black;'></div>
</html>
More examples
<html>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<label>Dollar</label><br>
<input data-mask='U$ #.##0,00'><br>
<label>Percentual</label><br>
<input data-mask='0%'><br>
<label>Liters</label><br>
<input data-mask='0.00 liters'><br>
<label>Date <i>dd/mm/yyyy</i></label><br>
<input data-mask='dd/mm/yyyy'><br>
<label>DateTime <i>yyyy-mm-dd hh24:mi</i></label><br>
<input data-mask='yyyy-mm-dd hh24:mi'><br>
<label>CPF <i>000.000.000-00</i></label><br>
<input data-mask='000.000.000-00'><br>
</html>
Advance masking combination
A few valid tokens can be used with mask as below:
0
0.00
0%
0.00%
#,##0
#,##0.00
#,##0;(#,##0)
#,##0;Red
#,##0.00;(#,##0.00)
#,##0.00;Red
d-mmm-yy
d-mmm
dd/mm/yyyy
mmm-yy
h:mm AM/PM
h:mm:ss AM/PM
h:mm
h:mm:ss
m/d/yy h:mm
mm:ss
[h]:mm:ss