--- title: "JavaScript Input Mask" description: "A simple JavaScript mask plugin. Create a mask on HTML input to make sure the data is correctly entered in form elements." source: https://jsuites.net/docs/javascript-mask --- ## Overview 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: | Tokens | |--------------------------| | 0 | | 0.00 | | 0% | | 0.00% | | #,##0 | | #,##0.00 | | #,##0;(#,##0) | | #,##0;[Red](#,##0) | | #,##0.00;(#,##0.00) | | #,##0.00;[Red](#,##0.00) | | d-mmm-yy | | d-mmm | | dd/mm/yyyy | | mmm-yy | | h:mm AM/PM | | h:mm:ss AM/PM | | h:mm | | h:mm:ss | | m/d/yy h:mm | | mm:ss | | [h]:mm:ss | ## Examples ### Using Masks in HTML Form Elements Learn how to apply masks to HTML input elements using tokens: ```html













``` ```jsx import "jsuites" import "jsuites/dist/jsuites.css" function App() { return (














); } export default App; ``` ```vue ``` ### 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: ```html
``` ```jsx import "jsuites" import 'jsuites/dist/jsuites.css' function App() { return (
); } export default App; ``` ```vue ``` ### Events 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. ```html

What is your birthday? dd/mm/yyyy

``` ```jsx import { useRef } from "react"; import "jsuites"; import "jsuites/dist/jsuites.css"; function App() { const log = useRef(null); const handleKeyUp = function(e) { log.current.innerHTML = ''; if (e.target.getAttribute('data-completed') == 'true') { log.current.innerHTML = 'Complete'; } else { log.current.innerHTML = 'Incomplete'; } }; return (

What is your birthday? dd/mm/yyyy

); } export default App; ``` ```vue ``` ### JavaScript Mask Methods You can programmatically apply a mask to a string using `jSuites.mask` with the following method: ```html



``` ```jsx import { useRef, useState } from "react"; import jSuites from "jsuites"; import "jsuites/dist/jsuites.css"; function App() { const maskText = useRef(null); const maskMask = useRef(null); const result = useRef(null); const [text, setText] = useState(1234.45); const [mask, setMask] = useState("#.##0,00"); const handleClick = function() { result.current.value = jSuites.mask.run(parseFloat(maskText.current.value), maskMask.current.value); }; return (




); } export default App; ``` ```vue ``` ## Related Tools - [JavaScript Tags](/docs/javascript-tags) - Tag and keyword input management - [JavaScript Rich Forms](/docs/rich-form) - Form validation and change tracking - [LemonadeJS Forms](https://lemonadejs.com/docs/forms) - Reactive form binding - [Jspreadsheet CE Format](https://jspreadsheet.com/docs/ce/format) - Excel-like masks in data grids (free) - [Cell Formatting](https://jspreadsheet.com/docs/format) - Advanced cell masks and number formatting (Pro) - [Data Validations](https://jspreadsheet.com/docs/validations) - Cell input validation rules (Pro) The JavaScript Mask uses the same Excel-like tokens as Jspreadsheet, making it easy to apply consistent formatting across standalone forms and spreadsheet cells.