Javascript input mask

The mask plugin from jSuites is very simple to use. You just need to define the data-mask property in your input fields.


1

Examples


Currency U$ #.##0,00



Source code
<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



Source code
<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



Source code
<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



Source code
<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



Source code
<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



Source code
<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



Source code
<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>


2

Parse programmatically


<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>



2

Events

The following example show how to alert when the data input is completed.


What is your birthday? dd/mm/yyyy



Source code
<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>


3

Input mask options


aAny letter
0Any Number
#.##0Formatted number
#,##0Formatted number
# ##0Formatted number
yyyyYear four digits
yyYear two digits
mmMonth
ddDay
hh24Hour 24
hhHour 12
miMinutes
ssSeconds
\aLetter "a" (escape for a)
\0Number "0" (escape for 0)
[-]Number signal (- or +)

NOTE: All tokens should be lowercase.