Phone PHONE
This mask is based on the libphonenumber-js package.
UsemaskitoPhoneOptionsGenerator to create a mask for phone input. Basic
Kazakhstan phone example
+Phone
This mask is based on the libphonenumber-js package.
UsemaskitoPhoneOptionsGeneratorto create a mask for phone input.Basic
Kazakhstan phone example
@@ -32,15 +32,15 @@ - Validation
For validating phone number you can use
isValidPhoneNumber,isPossiblePhoneNumberfunctions from libphonenumber-js package. Read moreBelow is an example of a Hungarian phone mask with an angular validator.
+Validation
For validating phone number you can use
isValidPhoneNumber,isPossiblePhoneNumberfunctions from libphonenumber-js package. Read moreBelow is an example of a Hungarian phone mask with an angular validator.
- Non-strict mask
Setting the
strictoption tofalseenables non-strict mask mode and allow user to type any country phone number.The
countryIsoCodeoption is optional in that case, but if you specify it, the mask will try to add that country's calling code when you try to insert a phone number without a calling code.+Non-strict mask
Setting the
strictoption tofalseenables non-strict mask mode and allow user to type any country phone number.The
countryIsoCodeoption is optional in that case, but if you specify it, the mask will try to add that country's calling code when you try to insert a phone number without a calling code.- Lazy metadata
You can load metadata lazily, below is an example of how to do it in Angular.
You can also customize the metadata to reduce metadata size. See instructions here
+Lazy metadata
You can load metadata lazily, below is an example of how to do it in Angular.
You can also customize the metadata to reduce metadata size. See instructions here
diff --git a/browser-support/index.html b/browser-support/index.html index b565b65c1..18081679a 100644 --- a/browser-support/index.html +++ b/browser-support/index.html @@ -22,7 +22,7 @@ - + Browser support
Desktop
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 Mobile
Browser Version Google Chrome 90+ Mozilla Firefox 99+ Safari 12.2+ Opera 64+ diff --git a/changelog/index.html b/changelog/index.html index 18a969ebd..e5a875278 100644 --- a/changelog/index.html +++ b/changelog/index.html @@ -23,7 +23,7 @@ - Browser support
Desktop
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 Mobile
Browser Version Google Chrome 90+ Mozilla Firefox 99+ Safari 12.2+ Opera 64+ Changelog
Changelog
+Changelog
Changelog
All notable changes to this project will be documented in this file. See standard-version for commit guidelines.
1.7.0 (2023-09-15)
diff --git a/core-concepts/element-state/index.html b/core-concepts/element-state/index.html index 925623d10..287721521 100644 --- a/core-concepts/element-state/index.html +++ b/core-concepts/element-state/index.html @@ -22,7 +22,7 @@ -Element state
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:
+diff --git a/core-concepts/mask-expression/index.html b/core-concepts/mask-expression/index.html index bcd259c8e..ca706108e 100644 --- a/core-concepts/mask-expression/index.html +++ b/core-concepts/mask-expression/index.html @@ -22,7 +22,7 @@ - Element state
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:
Mask expression
Mask expression is the the main concept of Maskito core library. It provides the developer with opportunity to predefine format of user's input. For example, you can set mask expression to accept only digits, only Latin letters or you can configure more complex patterns like a date string.You can set mask expression using
maskparameter ofMaskitoOptions.Types of mask expression
- RegExp mask expression
The most basic and comprehensible type. The only required knowledge is understanding of native JavaScript Regular expression .
See the following example:
+Mask expression
Mask expression is the the main concept of Maskito core library. It provides the developer with opportunity to predefine format of user's input. For example, you can set mask expression to accept only digits, only Latin letters or you can configure more complex patterns like a date string.You can set mask expression using
maskparameter ofMaskitoOptions.Types of mask expression
- RegExp mask expression
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.- Pattern mask expression
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:MMformat. It consists of 4 digits and 1 fixed-character separator:.diff --git a/core-concepts/overview/index.html b/core-concepts/overview/index.html index b57905a84..0d46cca63 100644 --- a/core-concepts/overview/index.html +++ b/core-concepts/overview/index.html @@ -22,7 +22,7 @@ - Core concepts
The main entity of Maskito core library is
Maskitoclass which accepts 2 arguments in constructor:
- native
HTMLInputElementorHTMLTextAreaElement- set of configurable
MaskitoOptions+diff --git a/core-concepts/overwrite-mode/index.html b/core-concepts/overwrite-mode/index.html index d09cc0590..ec0df4b37 100644 --- a/core-concepts/overwrite-mode/index.html +++ b/core-concepts/overwrite-mode/index.html @@ -22,7 +22,7 @@ - Core concepts
The main entity of Maskito core library is
Maskitoclass which accepts 2 arguments in constructor:
- native
HTMLInputElementorHTMLTextAreaElement- set of configurable
MaskitoOptionsThe only available public method
destroyremoves 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:
Mask expression
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.
Processors
Learn about preprocessors and postprocessors.
Plugins
Learn how you can augment masking with some custom logic bound to the masked HTML element.
Overwrite mode
Maskito can behave differently when user inserts new character in the middle of text field value. Learn how to control this behaviour via
overwriteModeparameter.Transformer
Learn how to correctly programmatically update element's value via
maskitoTransform.Overwrite mode
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.
overwriteModecan be of a following type:
shift(default)replace- function that receives element state as an argument and returns
shiftorreplaceShift mode
The classic mode that everyone is used to. Inserting a new character in the middle of the text field value shifts all following characters to the right.
+Overwrite mode
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.
overwriteModecan be of a following type:
shift(default)replace- function that receives element state as an argument and returns
shiftorreplaceShift mode
The classic mode that everyone is used to. Inserting a new character in the middle of the text field value shifts all following characters to the right.
@@ -32,7 +32,7 @@ - Replace mode
All new inserted characters replace the old characters at the same position. No character shifts. The length of the value remains the same after inserting new character somewhere in middle of the text field.
+Replace mode
All new inserted characters replace the old characters at the same position. No character shifts. The length of the value remains the same after inserting new character somewhere in middle of the text field.
@@ -42,7 +42,7 @@ - Dynamically detected mode
Parameter
overwriteModealso 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:shiftorreplace.+Dynamically detected mode
Parameter
overwriteModealso 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:shiftorreplace.diff --git a/core-concepts/plugins/index.html b/core-concepts/plugins/index.html index 00d830d9f..f09300ae2 100644 --- a/core-concepts/plugins/index.html +++ b/core-concepts/plugins/index.html @@ -22,7 +22,7 @@ - Plugins
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.
Visualize rejected characters
maskitoRejectEventin@maskito/kit+Plugins
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.
Visualize rejected characters
maskitoRejectEventin@maskito/kitdiff --git a/core-concepts/processors/index.html b/core-concepts/processors/index.html index fd2c4cd31..6fa8fecc4 100644 --- a/core-concepts/processors/index.html +++ b/core-concepts/processors/index.html @@ -22,7 +22,7 @@ - Processors
MaskitoOptionshave optional parameterspreprocessorsandpostprocessors. 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:
- The first argument always contains object with information that you can change. Object with the same properties and updated values can be returned from the processor. It means that you can keep all properties untouched or you can change any or all of these properties.
- The rest arguments contain information that can be useful to build some complex logic, but you cannot change it.
Preprocessors
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:
- Object with two properties:
elementStateanddata. Object of the same interface with updated or unchanged properties can be returned from the preprocessor.+Processors
MaskitoOptionshave optional parameterspreprocessorsandpostprocessors. 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:
- The first argument always contains object with information that you can change. Object with the same properties and updated values can be returned from the processor. It means that you can keep all properties untouched or you can change any or all of these properties.
- The rest arguments contain information that can be useful to build some complex logic, but you cannot change it.
Preprocessors
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:
- Object with two properties:
elementStateanddata. Object of the same interface with updated or unchanged properties can be returned from the preprocessor.- Name of the action which triggers current execution. It can be one of the following possible values:
diff --git a/core-concepts/transformer/index.html b/core-concepts/transformer/index.html index 75c96f4a9..740c650a8 100644 --- a/core-concepts/transformer/index.html +++ b/core-concepts/transformer/index.html @@ -22,7 +22,7 @@ - Transformer
Maskito libraries were created to prevent user from typing invalid value.
Maskito listensbeforeinputandinputevents. Programmatic (by developer) changes of input's value don't trigger these events!If you need to programmatically 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
maskitoTransformutility .+diff --git a/cypress/index.html b/cypress/index.html index 1f3581ecd..eb3a4f56c 100644 --- a/cypress/index.html +++ b/cypress/index.html @@ -22,7 +22,7 @@ - Transformer
Maskito libraries were created to prevent user from typing invalid value.
Maskito listensbeforeinputandinputevents. Programmatic (by developer) changes of input's value don't trigger these events!If you need to programmatically 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
maskitoTransformutility .Next steps
The following sections are recommended to explore core concepts further:
+ diff --git a/frameworks/angular/Setup/index.html b/frameworks/angular/Setup/index.html index 4d927e017..776e3de90 100644 --- a/frameworks/angular/Setup/index.html +++ b/frameworks/angular/Setup/index.html @@ -22,7 +22,7 @@ - Angular
- Install libraries
/your/project/path> +
Maskito 