The mask plugin from jSuites is very simple to use. You just need to define the data-mask property in your input fields.
Currency U$ #.##0,00
<html> <script src="https://bossanova.uk/jsuites/v2/jsuites.js"></script> <link rel="stylesheet" href="https://bossanova.uk/jsuites/v2/jsuites.css" type="text/css" /> <input data-mask='U$ #.##0,00'> </html>
Currency with sign [-]U$ #.##0,00
<html> <script src="https://bossanova.uk/jsuites/v2/jsuites.js"></script> <link rel="stylesheet" href="https://bossanova.uk/jsuites/v2/jsuites.css" type="text/css" /> <input data-mask='[-]U$ #.##0,00'> </html>
Date dd/mm/yyyy
<html> <script src="https://bossanova.uk/jsuites/v2/jsuites.js"></script> <link rel="stylesheet" href="https://bossanova.uk/jsuites/v2/jsuites.css" type="text/css" /> <input data-mask='dd/mm/yyyy'> </html>
Date and time yyyy-mm-dd hh24:mi
<html> <script src="https://bossanova.uk/jsuites/v2/jsuites.js"></script> <link rel="stylesheet" href="https://bossanova.uk/jsuites/v2/jsuites.css" type="text/css" /> <input data-mask='yyyy-mm-dd hh24:mi'> </html>
Brazilian Tax Number (CPF) 000.000.000-00
<html> <script src="https://bossanova.uk/jsuites/v2/jsuites.js"></script> <link rel="stylesheet" href="https://bossanova.uk/jsuites/v2/jsuites.css" type="text/css" /> <input data-mask='000.000.000-00'> </html>
UK Phone +44 0000 000 000
<html> <script src="https://bossanova.uk/jsuites/v2/jsuites.js"></script> <link rel="stylesheet" href="https://bossanova.uk/jsuites/v2/jsuites.css" type="text/css" /> <input data-mask='+44 0000 000 000'> </html>
Software Serial Number aaaaa-aaaaa-aaaaa-00
<html> <script src="https://bossanova.uk/jsuites/v2/jsuites.js"></script> <link rel="stylesheet" href="https://bossanova.uk/jsuites/v2/jsuites.css" type="text/css" /> <input data-mask='aaaaa-aaaaa-aaaaa-00'> </html>
<html>
<script src="https://bossanova.uk/jsuites/v2/jsuites.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jsuites/v2/jsuites.css" type="text/css" />
<button onclick='test()'>Alert: jSuites.mask.run('447473725104', '(00) 000000 0000')</button>
<script>
var test = function() {
var value = jSuites.mask.run('447473725104', '(00) 000000 0000');
alert(value);
}
</script>
</html>
The following example show how to alert when the data input is completed.
What is your birthday? dd/mm/yyyy
<html>
<script src="https://bossanova.uk/jsuites/v2/jsuites.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jsuites/v2/jsuites.css" type="text/css" />
<input id='date' data-mask='dd/mm/yyyy'> <span id='status'></span>
<script>
date.onkeyup = function(e) {
document.getElementById('status').innerHTML = '';
if (e.target.getAttribute('data-completed') == 'true') {
document.getElementById('status').innerHTML = 'Complete';
} else {
document.getElementById('status').innerHTML = 'Incomplete';
}
}
</script>
</html>
| a | Any letter |
| 0 | Any Number |
| #.##0 | Formatted number |
| #,##0 | Formatted number |
| # ##0 | Formatted number |
| yyyy | Year four digits |
| yy | Year two digits |
| mm | Month |
| dd | Day |
| hh24 | Hour 24 |
| hh | Hour 12 |
| mi | Minutes |
| ss | Seconds |
| \a | Letter "a" (escape for a) |
| \0 | Number "0" (escape for 0) |
| [-] | Number signal (- or +) |