The JavaScript Input Mask plugin is a versatile component designed to enhance user input experience by providing masking functionality for input elements. It offers comprehensive support for handling special keys, selections, and non-input actions. Additionally, it extends its functionality to support contentEditable DIV elements and introduces new tokens inspired by Excel-like masks.
Technical Highlights:
Compatible with popular frameworks like React, Angular, and Vue;
Optimized for mobile devices, ensuring usability across various platforms;
Provides features such as date picker, time picker, and year-month picker;
Offers a range of events for seamless integration with existing systems;
Can be utilized as a JavaScript plugin or web component;
Documentation
Input Mask Tokens
The JavaScript Input Mask plugin supports the following tokens for defining input masks. Some tokens can be combined, such as Date-time tokens, to create advanced and Excel-like mask patterns:
Method
Description
a
Any letter
0
Number
0 liters
Number
0%
Percentage
#,##0
Currency
$ #,##0.00
Currency with decimal
$ #.##0,00
Currency with decimal
dd/mm/yyyy
Date
hh:mm
Time
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 +)
Excel-like Input Mask
The JavaScript Input Mask plugin supports Excel-like input masks. Below are some valid tokens that can be used with the mask:
Learn how to apply masks to HTML input elements using tokens:
<html><scriptsrc="https://jsuites.net/v5/jsuites.js"></script><label>What is your birthday? <i>(Mask: dd/mm/yyyy)</i></label><br><inputdata-mask='dd/mm/yyyy'><br><label>US Format <i>(Mask: US #.##0,00)</i></label><br><inputdata-mask='#.##0,00'><br><label>Percent mask <i>(Mask: 0%)</i></label><br><inputdata-mask='0%'><br><label>How many liters <i>(Mask: 0.00 liters)</i></label><br><inputdata-mask='0.00 liters'><br><label>EURO French Format <i>(Mask: # ##0,00 €)</i></label><br><inputdata-mask='# ##0,00 €'><br><label>DateTime <i>yyyy-mm-dd hh24:mi</i></label><br><inputdata-mask='yyyy-mm-dd hh24:mi'><br><label>CPF <i>000.000.000-00</i></label><br><inputdata-mask='000.000.000-00'><br></html>
import"jsuites"import"jsuites/dist/jsuites.css"functionApp() {
return (
<divclassName="App"><label>What is your birthday? <i>(Mask: dd/mm/yyyy)</i></label><br/><inputdata-mask="dd/mm/yyyy"/><br/><label>US Format <i>(Mask: US #.##0,00)</i></label><br/><inputdata-mask="#.##0,00"/><br/><label>Percent mask <i>(Mask: 0%)</i></label><br/><inputdata-mask="0%"/><br/><label>How many liters <i>(Mask: 0.00 liters)</i></label><br/><inputdata-mask="0.00 liters"/><br/><label>EURO French Format <i>(Mask: # ##0,00 €)</i></label><br/><inputdata-mask="# ##0,00 €"/><br/><label>DateTime <i>yyyy-mm-dd hh24:mi</i></label><br/><inputdata-mask="yyyy-mm-dd hh24:mi"/><br/><label>CPF <i>000.000.000-00</i></label><br/><inputdata-mask="000.000.000-00"/><br/></div>
);
}
exportdefaultApp;
<template><label>What is your birthday? <i>(Mask: dd/mm/yyyy)</i></label><br /><inputdata-mask="dd/mm/yyyy" /><br /><label>US Format <i>(Mask: US #.##0,00)</i></label><br /><inputdata-mask="#.##0,00" /><br /><label>Percent mask <i>(Mask: 0%)</i></label><br /><inputdata-mask="0%" /><br /><label>How many liters <i>(Mask: 0.00 liters)</i></label><br /><inputdata-mask="0.00 liters" /><br /><label>EURO French Format <i>(Mask: # ##0,00 €)</i></label><br /><inputdata-mask="# ##0,00 €" /><br /><label>DateTime <i>yyyy-mm-dd hh24:mi</i></label><br /><inputdata-mask="yyyy-mm-dd hh24:mi" /><br /><label>CPF <i>000.000.000-00</i></label><br /><inputdata-mask="000.000.000-00" /><br /></template><script>import"jsuites"import"jsuites/dist/jsuites.css"exportdefault {
name: "App",
}
</script>
Using Mask on contentEditable Elements
You can apply masks to contentEditable elements for user input, such as entering currency prices. For example, to enforce the mask "U$ #.##0,00", follow this HTML code:
In the following example, a notification is displayed when data in an input field is completed. Upon completion, a property data-completed=true is added to the HTML element.