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
@@ -47,7 +47,7 @@ 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.
@@ -57,7 +57,7 @@ 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.@@ -67,7 +67,7 @@ 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 feac0d4c5..202451642 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 69c9ffb25..e3ee5f6e5 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 2279e3b1e..c3c33abf6 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:
+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 82c226f30..fe6b65ae5 100644 --- a/core-concepts/mask-expression/index.html +++ b/core-concepts/mask-expression/index.html @@ -22,7 +22,7 @@ - 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:
diff --git a/core-concepts/overview/index.html b/core-concepts/overview/index.html index 7ba8523b9..a3aed4f68 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+Core concepts
The main entity of Maskito core library is
Maskitoclass which accepts 2 arguments in constructor:
- native
HTMLInputElementorHTMLTextAreaElement- set of configurable
MaskitoOptionsdiff --git a/core-concepts/overwrite-mode/index.html b/core-concepts/overwrite-mode/index.html index e068a4866..718d23bc2 100644 --- a/core-concepts/overwrite-mode/index.html +++ b/core-concepts/overwrite-mode/index.html @@ -22,7 +22,7 @@ - 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.
@@ -47,7 +47,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.
@@ -72,7 +72,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 7238cfae9..8d3386a84 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 00bd1f021..ea4329026 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.diff --git a/core-concepts/transformer/index.html b/core-concepts/transformer/index.html index 39e31b1e9..c5b0439c8 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 .+
Maskito 