| Browser | Version |
|---|---|
| Google Chrome | 74+ |
| Mozilla Firefox | 55+ |
| Safari | 12.1+ |
| Opera | 62+ |
| Edge (Chromium) | 74+ |
| Microsoft Internet Explorer | Not supported |
| Edge (EdgeHTML) | Not supported |
| Browser | Version |
|---|---|
| Google Chrome | 90+ |
| Mozilla Firefox | 99+ |
| Safari | 12.2+ |
| Opera | 64+ |
| Browser | Version |
|---|---|
| Google Chrome | 74+ |
| Mozilla Firefox | 55+ |
| Safari | 12.1+ |
| Opera | 62+ |
| Edge (Chromium) | 74+ |
| Microsoft Internet Explorer | Not supported |
| Edge (EdgeHTML) | Not supported |
| Browser | Version |
|---|---|
| Google Chrome | 90+ |
| Mozilla Firefox | 99+ |
| Safari | 12.2+ |
| Opera | 64+ |
All notable changes to this project will be documented in this file. See standard-version for commit guidelines.
Element state is a concept which describes the main properties of the masked element at the certain period of time.
It is an object which implements the following interface:
Maskito 
This concept is actively used throughout Maskito libraries, and you can find its usage in the following topics:
Element state is a concept which describes the main properties of the masked element at the certain period of time.
It is an object which implements the following interface:
This concept is actively used throughout Maskito libraries, and you can find its usage in the following topics:
You can set mask expression using mask parameter of MaskitoOptions .
The most basic and comprehensible type. The only required knowledge is understanding of native JavaScript Regular expression .
See the following example:
For example, imagine that you have to create mask for 4-digits PIN code.
/^\d{4}$/ is a wrong mask expression. It does not match intermediate states (you cannot complete 4-digit string without possibility to type 1-, 2- or 3-digit string).
/^\d{0,4}$/ is the right solution for our example.
It is a good choice for more complex masks that are fixed in size. This type of mask expression is presented as array. Each element in the array has to be either a string or a regular expression. Each string is a fixed character and each regular expression is validator of character at the same index.
For example, imagine that you have to create mask for a time-string with HH:MM format. It consists of 4 digits and 1 fixed-character separator : .
This mask expression forbids anything excepts digits and limits length of the value to 5 characters.
Also, it manages user interactions with fixed character.
For example, user can just type four digits 1159 and the value becomes 11:59
Another example, if caret position is after the colon and user presses Backspace , the input's value will not change but caret will be moved to the left of the colon.
mask parameter can also accepts function which generates mask expression. This function will be called every time before input changes to generate a new version of mask expression.
Think about optimization and memoization of the such function.
The following sections are recommended to explore core concepts further:
You can set mask expression using mask parameter of MaskitoOptions .
The most basic and comprehensible type. The only required knowledge is understanding of native JavaScript Regular expression .
See the following example:
For example, imagine that you have to create mask for 4-digits PIN code.
/^\d{4}$/ is a wrong mask expression. It does not match intermediate states (you cannot complete 4-digit string without possibility to type 1-, 2- or 3-digit string).
/^\d{0,4}$/ is the right solution for our example.
It is a good choice for more complex masks that are fixed in size. This type of mask expression is presented as array. Each element in the array has to be either a string or a regular expression. Each string is a fixed character and each regular expression is validator of character at the same index.
For example, imagine that you have to create mask for a time-string with HH:MM format. It consists of 4 digits and 1 fixed-character separator : .
This mask expression forbids anything excepts digits and limits length of the value to 5 characters.
Also, it manages user interactions with fixed character.
For example, user can just type four digits 1159 and the value becomes 11:59
Another example, if caret position is after the colon and user presses Backspace , the input's value will not change but caret will be moved to the left of the colon.
mask parameter can also accepts function which generates mask expression. This function will be called every time before input changes to generate a new version of mask expression.
Think about optimization and memoization of the such function.
The following sections are recommended to explore core concepts further:
The main entity of Maskito core library is Maskito class which accepts 2 arguments in constructor:
HTMLInputElement or HTMLTextAreaElementMaskitoOptions The only available public method destroy removes all created event listeners. Call it to clean everything up when the work is finished.
To understand the capabilities of the Maskito library, you need to learn about the following features and concepts:
Learn how to predefine your mask format via mask expression. This section describes different types of mask expression and explains meaning of "fixed character" term.
Learn about preprocessors and postprocessors.
Learn how you can augment masking with some custom logic bound to the masked HTML element.
Maskito can behave differently when user inserts new character in the middle of text field value. Learn how to control this behaviour via overwriteMode parameter.
Learn how to correctly programatically update element's value via maskitoTransform .
The main entity of Maskito core library is Maskito class which accepts 2 arguments in constructor:
HTMLInputElement or HTMLTextAreaElementMaskitoOptions The only available public method destroy removes all created event listeners. Call it to clean everything up when the work is finished.
To understand the capabilities of the Maskito library, you need to learn about the following features and concepts:
Learn how to predefine your mask format via mask expression. This section describes different types of mask expression and explains meaning of "fixed character" term.
Learn about preprocessors and postprocessors.
Learn how you can augment masking with some custom logic bound to the masked HTML element.
Maskito can behave differently when user inserts new character in the middle of text field value. Learn how to control this behaviour via overwriteMode parameter.
Learn how to correctly programatically update element's value via maskitoTransform .
Overwrite mode regulates behaviour of the mask when user inserts a new character somewhere in the middle of text field, overwriting the character at the current index.
overwriteMode can be of a following type:
shift (default) replaceshift or replaceoverwriteMode also accepts function that will called before each insertion of new characters. This function has one argument — current element state (read more about it in the "Element state" section). And this function should return one of two possible values: shift or replace . The following sections are recommended to explore core concepts further:
Overwrite mode regulates behaviour of the mask when user inserts a new character somewhere in the middle of text field, overwriting the character at the current index.
overwriteMode can be of a following type:
shift (default) replaceshift or replaceoverwriteMode also accepts function that will called before each insertion of new characters. This function has one argument — current element state (read more about it in the "Element state" section). And this function should return one of two possible values: shift or replace . The following sections are recommended to explore core concepts further:
Plugins are functions that are called with input/textarea element and mask options as arguments upon mask initialization. They can optionally return cleanup logic and allow you to extend mask with arbitrary additional behavior.
maskitoRejectEvent in @maskito/kitThe following sections are recommended to explore core concepts further:
Plugins are functions that are called with input/textarea element and mask options as arguments upon mask initialization. They can optionally return cleanup logic and allow you to extend mask with arbitrary additional behavior.
maskitoRejectEvent in @maskito/kitThe following sections are recommended to explore core concepts further:
MaskitoOptions have optional parameters preprocessors and postprocessors . Both accept array of pure functions. These functions are triggered on every user's input ( beforeinput and input events). They provide an opportunity to modify value before / after the mask is applied.
Preprocessors and postprocessors accept different types of arguments but they have two important similarities:
Each preprocessor is a function that is called before mask is applied.
For example, if user types a new character, all preprocessors will be called first, and only then final value that they returned will be passed into the mask, and finally the mask will accept or reject new typed character and update actual value of the text field.
Preprocessor accepts two arguments:
elementState and data . Object of the same interface with updated or unchanged properties can be returned from the preprocessor. Preprocessor returns an objects of the same interface as the first argument.
Each postprocessor is a function that is called after the mask is applied. When all preprocessors are already called, all mask operations happened and the input's value is about to be updated. You can change everything manually inside a postprocessor.
Postprocessor accepts two arguments:
Postprocessor returns an objects of the same interface as the first argument.
With great power comes great responsibility!
Postprocessor is the final step before input's value update which gives a lot of flexibility. Use postprocessor wisely and return a valid value!
The Maskito team likes code decomposition and promotes it! Don't put all complex logic inside a single processor. Both parameters preprocessors and postprocessors accepts array of same type processors. Break your code into the several independent processors so that each processor implements only a single task.
The following sections are recommended to explore core concepts further:
MaskitoOptions have optional parameters preprocessors and postprocessors . Both accept array of pure functions. These functions are triggered on every user's input ( beforeinput and input events). They provide an opportunity to modify value before / after the mask is applied.
Preprocessors and postprocessors accept different types of arguments but they have two important similarities:
Each preprocessor is a function that is called before mask is applied.
For example, if user types a new character, all preprocessors will be called first, and only then final value that they returned will be passed into the mask, and finally the mask will accept or reject new typed character and update actual value of the text field.
Preprocessor accepts two arguments:
elementState and data . Object of the same interface with updated or unchanged properties can be returned from the preprocessor. Preprocessor returns an objects of the same interface as the first argument.
Each postprocessor is a function that is called after the mask is applied. When all preprocessors are already called, all mask operations happened and the input's value is about to be updated. You can change everything manually inside a postprocessor.
Postprocessor accepts two arguments:
Postprocessor returns an objects of the same interface as the first argument.
With great power comes great responsibility!
Postprocessor is the final step before input's value update which gives a lot of flexibility. Use postprocessor wisely and return a valid value!
The Maskito team likes code decomposition and promotes it! Don't put all complex logic inside a single processor. Both parameters preprocessors and postprocessors accepts array of same type processors. Break your code into the several independent processors so that each processor implements only a single task.
The following sections are recommended to explore core concepts further:
Maskito libraries were created to prevent user from typing invalid value.
Maskito listens beforeinput and input events. Programatic (by developer) changes of input's value don't trigger these events!
If you need to programatically patch input's value but you are not sure that your value is valid (for example, you get it from the server), you should use maskitoTransform utility .
The following sections are recommended to explore core concepts further:
Maskito libraries were created to prevent user from typing invalid value.
Maskito listens beforeinput and input events. Programatic (by developer) changes of input's value don't trigger these events!
If you need to programatically patch input's value but you are not sure that your value is valid (for example, you get it from the server), you should use maskitoTransform utility .
The following sections are recommended to explore core concepts further:
/your/project/path>
+
@maskito/angular is a light-weighted library to use Maskito in an Angular-way. To get the most out of this guide, you should review the topic "Core Concepts" first.
[maskito] directive. Use it when you have direct access to native input element.
your.component.ts
+ To get the most out of this guide, you should review the topic "Core Concepts" first. Use it when you have direct access to native input element. your.component.ts
Pass a predicate to maskito to find input element for you, if you do not have a direct access to it. your.component.ts
- To get the most out of this guide, you should review the topic "Core Concepts" first. Install libraries and use Maskito Pass a predicate to elementPredicate to find input element for you, if you do not have a direct access to it. For example, you use component from some UI Kit library. Maskito core is developed as framework-agnostic library. It does not depend on any JS-framework's peculiarities. It uses only native browser API. That is why you should use native Pass named variables to avoid unnecessary hook runs with Maskito recreation: To get the most out of this guide, you should review the topic "Core Concepts" first. Install libraries and use Maskito Pass a predicate to elementPredicate to find input element for you, if you do not have a direct access to it. For example, you use component from some UI Kit library. Maskito core is developed as framework-agnostic library. It does not depend on any JS-framework's peculiarities. It uses only native browser API. That is why you should use native Pass named variables to avoid unnecessary hook runs with Maskito recreation: To get the most out of this guide, you should review the topic "Core Concepts" first. Install libraries and use Maskito Pass a predicate to elementPredicate to find input element for you, if you do not have a direct access to it. For example, you use component from some UI Kit library. Avoid inlining options object, otherwise Maskito will be recreated on every update: To get the most out of this guide, you should review the topic "Core Concepts" first. Install libraries and use Maskito Pass a predicate to elementPredicate to find input element for you, if you do not have a direct access to it. For example, you use component from some UI Kit library. Avoid inlining options object, otherwise Maskito will be recreated on every update: Maskito is a collection of libraries. Explore them and learn how to install and use them. It is the main zero-dependency and framework-agnostic package. It can be used alone in vanilla JavaScript project. It listens to /your/project/path>
+ Maskito is a collection of libraries. Explore them and learn how to install and use them. It is the main zero-dependency and framework-agnostic package. It can be used alone in vanilla JavaScript project. It listens to /your/project/path>
Learn more about this library in "Core Concepts" section. The optional framework-agnostic package. It contains ready-to-use masks with configurable parameters. /your/project/path>
The Angular-specific library. It provides a convenient way to use Maskito as a directive. /your/project/path>
Learn more about this library in "Angular" section. The React-specific library. It provides a convenient way to use Maskito as a hook. /your/project/path>
diff --git a/getting-started/what-is-maskito/index.html b/getting-started/what-is-maskito/index.html
index 101c4ccd2..66016901b 100644
--- a/getting-started/what-is-maskito/index.html
+++ b/getting-started/what-is-maskito/index.html
@@ -22,7 +22,7 @@
Core concepts of the libraries are simple but they provide flexible API to set any format you wish: numbers, phone, date, credit card number etc. No textfield with invalid value! Use Maskito. Mask it! Core concepts of the libraries are simple but they provide flexible API to set any format you wish: numbers, phone, date, credit card number etc. No textfield with invalid value! Use Maskito. Mask it! Core concepts of the libraries are simple but they provide flexible API to set any format you wish: numbers, phone, date, credit card number etc. No textfield with invalid value! Use Maskito. Mask it! Core concepts of the libraries are simple but they provide flexible API to set any format you wish: numbers, phone, date, credit card number etc. No textfield with invalid value! Use Maskito. Mask it! Default: Default: Default: Default: Default: Default: Default: Default: Default: Default: Default: Default: Default: Default: Use Default: Default: dot. Default: Default: Default: non-breaking space. Default: Default: Default: empty string (no prefix). Default: empty string (no postfix). Use Default: Default: dot. Default: Default: Default: non-breaking space. Default: Default: Default: empty string (no prefix). Default: empty string (no postfix). Use Set Non removable dollar sign is achieved by using Use Set Non removable dollar sign is achieved by using Use Available options : Property Time segments are units of the time which form time string. For example, Use Available options : Property Time segments are units of the time which form time string. For example, Creating mask for credit card input requires basic understanding of the following topics: Creating mask for credit card input requires basic understanding of the following topics: Creating mask for a phone number is simple. The only required knowledge is the pattern mask expression with fixed characters . Read more about it in "Mask expression" section. This page demonstrates some examples for different countries. The following example demonstrates a more complex mask. It shows how to make the country prefix non-removable. It is achieved by built-in postprocessor from Read more about it in "With prefix" section. Creating mask for a phone number is simple. The only required knowledge is the pattern mask expression with fixed characters . Read more about it in "Mask expression" section. This page demonstrates some examples for different countries. The following example demonstrates a more complex mask. It shows how to make the country prefix non-removable. It is achieved by built-in postprocessor from Read more about it in "With prefix" section. This example is the simplest demonstration how to create masked input with placeholder . The only required prerequisite is basic understanding of "Mask expression" concept. The following example explains return type of Also, this complex example uses built-in postprocessor maskitoPrefixPostprocessorGenerator from This example is the simplest demonstration how to create masked input with placeholder . The only required prerequisite is basic understanding of "Mask expression" concept. The following example explains return type of Also, this complex example uses built-in postprocessor maskitoPrefixPostprocessorGenerator from This example demonstrates how to create postfix via postprocessor . It provides more flexibility, and you can configure any desired behaviour. You can use built-in This example demonstrates how to create postfix via postprocessor . It provides more flexibility, and you can configure any desired behaviour. You can use built-in Use prefixes to indicate things like currencies, area / phone country codes and etc. There are two approaches to add prefix for masked input. Every approach has its own behaviour and requires basic understanding of different core concepts. This example demonstrates how to create prefix via postprocessor . It provides more flexibility, and you can configure any desired behaviour. You can use built-in Use prefixes to indicate things like currencies, area / phone country codes and etc. There are two approaches to add prefix for masked input. Every approach has its own behaviour and requires basic understanding of different core concepts. This example demonstrates how to create prefix via postprocessor . It provides more flexibility, and you can configure any desired behaviour. You can use built-in You can use Maskito with Learn more in the "Core Concepts" section. You can use Maskito with Learn more in the "Core Concepts" section. Angular
@maskito/angular is a light-weighted library to use Maskito in an Angular-way. PrerequisitesWrite less code
[maskito] directive. Basic directive approach
Nested input element
By default maskito will try to find input/textarea by querying its host: host.querySelector('input,textarea') so that might be sufficient. Use custom predicate if you need custom logic. Custom input
See querying nested input in action
Default behavior is enough for Taiga UI inputs Custom predicate is required if target input is not the first on in the DOM React
@maskito/react is a light-weighted library to use Maskito in an React-way. PrerequisitesGetting Started
Query nested input element
By default Maskito will try to find input/textarea by querying its host: host.querySelector('input,textarea') so that might be sufficient. Use custom predicate if you need custom logic. Controlled masked input
onInput instead of React-specific onChange event. Do not worry, both events works similarly! Read more about it in the official React documentation. Best practices & Anti-Patterns
React
@maskito/react is a light-weighted library to use Maskito in an React-way. PrerequisitesGetting Started
Query nested input element
By default Maskito will try to find input/textarea by querying its host: host.querySelector('input,textarea') so that might be sufficient. Use custom predicate if you need custom logic. Controlled masked input
onInput instead of React-specific onChange event. Do not worry, both events works similarly! Read more about it in the official React documentation. Best practices & Anti-Patterns
Vue
@maskito/vue is a light-weighted library to use Maskito in as a Vue directive. PrerequisitesGetting Started
Above code example in practice
Query nested input element
By default Maskito will try to find input/textarea by querying its host: host.querySelector('input,textarea') so that might be sufficient. Use custom predicate if you need custom logic. Best practices & Anti-Patterns
Vue
@maskito/vue is a light-weighted library to use Maskito in as a Vue directive. PrerequisitesGetting Started
Above code example in practice
Query nested input element
By default Maskito will try to find input/textarea by querying its host: host.querySelector('input,textarea') so that might be sufficient. Use custom predicate if you need custom logic. Best practices & Anti-Patterns
Maskito libraries
beforeinput and input events to validate and calibrate text field value. All other Maskito's packages require @maskito/core as peer-dependency. Maskito libraries
beforeinput and input events to validate and calibrate text field value. All other Maskito's packages require @maskito/core as peer-dependency. What is Maskito?
Maskito is a collection of libraries, built with TypeScript. It helps you to create an input mask which ensures that users type values according to predefined format. Why Maskito?
strict TypeScript mode. Our code is covered by hundreds of Cypress tests. HTMLInputElement and HTMLTextAreaElement . Learn about Maskito
What is Maskito?
Maskito is a collection of libraries, built with TypeScript. It helps you to create an input mask which ensures that users type values according to predefined format. Why Maskito?
strict TypeScript mode. Our code is covered by hundreds of Cypress tests. HTMLInputElement and HTMLTextAreaElement . Learn about Maskito
What is Maskito?
Maskito is a collection of libraries, built with TypeScript. It helps you to create an input mask which ensures that users type values according to predefined format. Why Maskito?
strict TypeScript mode. Our code is covered by hundreds of Cypress tests. HTMLInputElement and HTMLTextAreaElement . Learn about Maskito
What is Maskito?
Maskito is a collection of libraries, built with TypeScript. It helps you to create an input mask which ensures that users type values according to predefined format. Why Maskito?
strict TypeScript mode. Our code is covered by hundreds of Cypress tests. HTMLInputElement and HTMLTextAreaElement . Learn about Maskito
DateRange
KIT tuiMode: -Name and description Type Value [mode] Date format mode MaskitoDateMode 'dd/mm/yyyy' [dateSeparator] Separator between date segments (days, months and years). . (dot). string [rangeSeparator] Separator between dates of the date range. – string [min] Earliest date Date '0001-01-01' [max] Latest date Date '9999-12-31' [minLength] Minimal length of the range MaskitoDateSegments<number> {} [maxLength] Maximal length of the range MaskitoDateSegments<number> {} [separator] deprecated Use dateSeparator instead. . (dot). DateRange
KIT tuiMode: -Name and description Type Value [mode] Date format mode MaskitoDateMode 'dd/mm/yyyy' [dateSeparator] Separator between date segments (days, months and years). . (dot). string [rangeSeparator] Separator between dates of the date range. – string [min] Earliest date Date '0001-01-01' [max] Latest date Date '9999-12-31' [minLength] Minimal length of the range MaskitoDateSegments<number> {} [maxLength] Maximal length of the range MaskitoDateSegments<number> {} [separator] deprecated Use dateSeparator instead. . (dot). DateRange
KIT Use maskitoDateRangeOptionsGenerator to create a mask to input a range of dates. Date localization
Use
mode and separator parameters to get a mask with a locale specific representation of dates. Min and max dates
Parameters
min and max allow you to set the earliest and the latest available dates. They accept native Date . Min and max length of range
Use
minLength and maxLength parameters to set minimal and maximal length of the date range. Custom range separator
Use
rangeSeparator parameter to customize separator between dates of the date range. DateRange
KIT Use maskitoDateRangeOptionsGenerator to create a mask to input a range of dates. Date localization
Use
mode and separator parameters to get a mask with a locale specific representation of dates. Min and max dates
Parameters
min and max allow you to set the earliest and the latest available dates. They accept native Date . Min and max length of range
Use
minLength and maxLength parameters to set minimal and maximal length of the date range. Custom range separator
Use
rangeSeparator parameter to customize separator between dates of the date range. DateTime
KIT tuiMode: -Name and description Type Value [dateMode] Date format mode MaskitoDateMode 'dd/mm/yyyy' [timeMode] Time format mode MaskitoTimeMode 'HH:MM' [dateSeparator] Date separator . (dot). string [min] Earliest date Date '0001-01-01T00:00:00' [max] Latest date Date '9999-12-31T23:59:59' DateTime
KIT tuiMode: -Name and description Type Value [dateMode] Date format mode MaskitoDateMode 'dd/mm/yyyy' [timeMode] Time format mode MaskitoTimeMode 'HH:MM' [dateSeparator] Date separator . (dot). string [min] Earliest date Date '0001-01-01T00:00:00' [max] Latest date Date '9999-12-31T23:59:59' DateTime
KIT Use maskitoDateTimeOptionsGenerator to create a mask to input both date and time. Localization
Use
dateMode , timeMode and dateSeparator parameters to get a mask with a locale specific representation of dates. Min and max
Parameters
min and max allow to set the earliest and the latest available dates. They accept native Date . DateTime
KIT Use maskitoDateTimeOptionsGenerator to create a mask to input both date and time. Localization
Use
dateMode , timeMode and dateSeparator parameters to get a mask with a locale specific representation of dates. Min and max
Parameters
min and max allow to set the earliest and the latest available dates. They accept native Date . Date
KIT tuiMode: -Name and description Type Value [mode] Date format mode MaskitoDateMode 'dd/mm/yyyy' [separator] Symbol for separating date-segments (days, months, years) . (dot) string '.' [min] Earliest date new Date('0001-01-01') Date '0001-01-01' [max] Latest date new Date('9999-12-31') Date '9999-12-31' Date
KIT tuiMode: -Name and description Type Value [mode] Date format mode MaskitoDateMode 'dd/mm/yyyy' [separator] Symbol for separating date-segments (days, months, years) . (dot) string '.' [min] Earliest date new Date('0001-01-01') Date '0001-01-01' [max] Latest date new Date('9999-12-31') Date '9999-12-31' Date
KIT Use maskitoDateOptionsGenerator to create a mask for date input. Date localization
Use
mode and separator properties to get a mask with a locale specific representation of dates. Min/Max
Properties
min and max allow you to set the earliest and the latest available dates. They accept native Date . Date
KIT Use maskitoDateOptionsGenerator to create a mask for date input. Date localization
Use
mode and separator properties to get a mask with a locale specific representation of dates. Min/Max
Properties
min and max allow you to set the earliest and the latest available dates. They accept native Date . Number
KIT tuiMode: -Name and description Type Value [precision] A number of digits after decimalSeparator . Infinity for an untouched decimal part. 0 (decimal part is forbidden). number 0 [decimalSeparator] Symbol for separating fraction. string [decimalPseudoSeparators] Symbols to be replaced with decimalSeparator . ['.', 'ю', 'б'] . string[] ['.', ',', 'б', 'ю'] [decimalZeroPadding] If number of digits after decimalSeparator is always equal to the precision . false (number of digits can be less than precision) . boolean [thousandSeparator] Symbol for separating thousands. string [min] The lowest permitted value. Number.MIN_SAFE_INTEGER . number [max] The greatest permitted value. Number.MAX_SAFE_INTEGER . number [prefix] A prefix symbol, like currency. string [postfix] A postfix symbol, like currency. string Number
KIT tuiMode: -Name and description Type Value [precision] A number of digits after decimalSeparator . Infinity for an untouched decimal part. 0 (decimal part is forbidden). number 0 [decimalSeparator] Symbol for separating fraction. string [decimalPseudoSeparators] Symbols to be replaced with decimalSeparator . ['.', 'ю', 'б'] . string[] ['.', ',', 'б', 'ю'] [decimalZeroPadding] If number of digits after decimalSeparator is always equal to the precision . false (number of digits can be less than precision) . boolean [thousandSeparator] Symbol for separating thousands. string [min] The lowest permitted value. Number.MIN_SAFE_INTEGER . number [max] The greatest permitted value. Number.MAX_SAFE_INTEGER . number [prefix] A prefix symbol, like currency. string [postfix] A postfix symbol, like currency. string Number
KIT Use maskitoNumberOptionsGenerator to create a mask for entering a formatted number. Despite the name of the mask, element's raw value is still string. maskitoParseNumber to get number-type value. High precision
Use
precision parameter to configure the number of digits after decimal separator. Separators
Use
decimalSeparator and thousandSeparator to get mask with locale specific representation of numbers. In Germany people use comma as decimal separator and dot for thousands Postfix
Use postfix parameter to set non-removable text after the number. Additionally you can use maskitoCaretGuard to clamp caret inside allowable range. This example also shows how to restrict the greatest permitted value via max parameter. Decimal zero padding
decimalZeroPadding: true to always show trailing zeroes. prefix parameter. Dynamic decimal zero padding
You can change options on the fly to build complex logic. This example shows how to initially disable decimalZeroPadding and enable it only after user inserts decimal separator. Number
KIT Use maskitoNumberOptionsGenerator to create a mask for entering a formatted number. Despite the name of the mask, element's raw value is still string. maskitoParseNumber to get number-type value. High precision
Use
precision parameter to configure the number of digits after decimal separator. Separators
Use
decimalSeparator and thousandSeparator to get mask with locale specific representation of numbers. In Germany people use comma as decimal separator and dot for thousands Postfix
Use postfix parameter to set non-removable text after the number. Additionally you can use maskitoCaretGuard to clamp caret inside allowable range. This example also shows how to restrict the greatest permitted value via max parameter. Decimal zero padding
decimalZeroPadding: true to always show trailing zeroes. prefix parameter. Dynamic decimal zero padding
You can change options on the fly to build complex logic. This example shows how to initially disable decimalZeroPadding and enable it only after user inserts decimal separator. Time
KIT Use maskitoTimeOptionsGenerator to create a mask for time input. Mode
mode property to set time format. HH:MM , HH:MM:SS or HH:MM:SS.MSS . 12-hours format
timeSegmentMaxValues allows you to set max value for every time segment. HH:MM consists of two time segments: hours and minutes. Time
KIT Use maskitoTimeOptionsGenerator to create a mask for time input. Mode
mode property to set time format. HH:MM , HH:MM:SS or HH:MM:SS.MSS . 12-hours format
timeSegmentMaxValues allows you to set max value for every time segment. HH:MM consists of two time segments: hours and minutes. Card
Recipes@maskito/kit Card
Recipes@maskito/kit Phone
RecipesUnited States
Kazakhstan
@maskito/kit . 
Phone
RecipesUnited States
Kazakhstan
@maskito/kit . With placeholder
RecipesmaskitoWithPlaceholder helps to show placeholder mask characters. The placeholder character represents the fillable spot in the mask. Card Verification Code
Phone
maskitoWithPlaceholder utility — an object which partially implements MaskitoOptions interface. It contains its own processor and postprocessor and plugins to keep caret from getting into placeholder part of the value. @maskito/kit . Date
This last example demonstrates how to integrate
maskitoWithPlaceholder with any built-in mask from @maskito/kit . With placeholder
RecipesmaskitoWithPlaceholder helps to show placeholder mask characters. The placeholder character represents the fillable spot in the mask. Card Verification Code
Phone
maskitoWithPlaceholder utility — an object which partially implements MaskitoOptions interface. It contains its own processor and postprocessor and plugins to keep caret from getting into placeholder part of the value. @maskito/kit . Date
This last example demonstrates how to integrate
maskitoWithPlaceholder with any built-in mask from @maskito/kit . With postfix
Recipes There are two approaches to add postfix for masked input. Every approach has its own behaviour and requires basic understanding of different core concepts. By pattern mask expression
This example demonstrates how to create postfix via dynamic pattern mask expression . Percent symbol is a trailing fixed character, which will be automatically added when user enters the first digit.
By postprocessor
maskitoPostfixPostprocessorGenerator or create your own. Don't forget that mask property should be compatible with a new prefix / postfix! With postfix
Recipes There are two approaches to add postfix for masked input. Every approach has its own behaviour and requires basic understanding of different core concepts. By pattern mask expression
This example demonstrates how to create postfix via dynamic pattern mask expression . Percent symbol is a trailing fixed character, which will be automatically added when user enters the first digit.
By postprocessor
maskitoPostfixPostprocessorGenerator or create your own. Don't forget that mask property should be compatible with a new prefix / postfix! With prefix
RecipesBy pattern mask expression
This example demonstrates how to create prefix via dynamic pattern mask expression . Dollar symbol is a fixed character, which will be automatically added when user forgets to type it or deleted when user erase all digits.
By postprocessor
maskitoPrefixPostprocessorGenerator or create your own. Don't forget that mask property should be compatible with a new prefix! With prefix
RecipesBy pattern mask expression
This example demonstrates how to create prefix via dynamic pattern mask expression . Dollar symbol is a fixed character, which will be automatically added when user forgets to type it or deleted when user erase all digits.
By postprocessor
maskitoPrefixPostprocessorGenerator or create your own. Don't forget that mask property should be compatible with a new prefix! Textarea
RecipesHTMLTextAreaElement too. API is the same as for HTMLInputElement . Latin letters and digits
Textarea
RecipesHTMLTextAreaElement too. API is the same as for HTMLInputElement . Latin letters and digits