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

More information about the jSuites JavaScript mask plugin