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 add a mask on contentEditable based elements. The mask plugin from the jSuites JavaScript collection is very simple to use. You just need to define the data-mask property in your input fields .
What is your birthday? (Mask: dd/mm/yyyy)
More examples
<html> <script src="https://jsuites.net/v4/jsuites.js"></script> <input data-mask='U$ #.##0,00'> <input data-mask='[-]U$ #.##0,00'> <input data-mask='dd/mm/yyyy'> <input data-mask='yyyy-mm-dd hh24:mi'> <input data-mask='000.000.000-00'> <input data-mask='aaaaa-aaaaa-aaaaa-00'> </html>
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'></div> </html>
See more working examples | More information about the available tokens