Vanilla javascript input mask

The mask plugin from jSuites is the simplest possible, and 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>

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

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
#.##0A figure with no length limit
#,##0A figure with no length limit
yyyyYear four digits
yyYear two digits
mmMonth
ddDay
hh24Hour 24
hhHour 12
miMinutes
ssSeconds
\aLetter "a" (scape for a)
\0Number "0" (scape for 0)
[-]Number signal (- or +)

NOTE: All tokens should be lowercase.