Star

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)

US Format US #.##0,00

EURO French Format # ##0,00 €




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