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.

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>

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>

Input mask options

a	Any letter
0	Any Number
#.##0	A figure with no length limit
#,##0	A figure with no length limit
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" (scape for a)
\0	Number "0" (scape for 0)
[-]	Number signal (- or +)

NOTE: All tokens should be lowercase.

Components

Other plugins

Vanilla javascript input mask

Examples

Events

Input mask options