Components

Dropdown
Autocomplete, multiple and filters
Date and datetime picker
Responsive calendar and time picker
Input mask
String and text mask
Javascript rating plugin
Simple colorpicker plugin
Color picker
Simple colorpicker plugin
Contextmenu
Add a simple contextmenu in your website
Image slider
Simple vanilla javascript image sliderplugin
HTML editor
Simple vanilla javascript html editor plugin
Form changes tracker
Alert unsaved changes before leave a page
Modal
Simple vanilla javascript modal plugin

Other plugins

jExcel CE
The javascript spreadsheet

Vanilla javascript input mask

jMask is a very easy masking tool, you just define data-mask property and that's it.

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)

NOTE: All tokens should be lowercase.