| Name and description | Type | Value |
|---|---|---|
[countryIsoCode] Country ISO-code | string | 'RU' |
[strict] If true, it allows to enter only phone number of selected country (see countryIsoCode property). If false, all country phone number is allowed. Default: | boolean | |
[separator] Separator between groups of numbers in a phone number (excluding country code and area code). Default: | string | '-' |
| Name and description | Type | Value |
|---|---|---|
[countryIsoCode] Country ISO-code | string | 'RU' |
[strict] If true, it allows to enter only phone number of selected country (see countryIsoCode property). If false, all country phone number is allowed. Default: | boolean | |
[separator] Separator between groups of numbers in a phone number (excluding country code and area code). Default: | string | '-' |
This mask is based on the libphonenumber-js package.
Use
Maskito 
maskitoPhoneOptionsGenerator to create a mask for phone input. +Phone
This mask is based on the libphonenumber-js package.
UsemaskitoPhoneOptionsGeneratorto create a mask for phone input.Basic
Kazakhstan phone example
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
+ 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 6ae2fcf6a..68df05a1b 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.9.0 (2023-11-23)
diff --git a/core-concepts/element-state/index.html b/core-concepts/element-state/index.html index 887476570..07f9763a2 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:
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:
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
MaskitoOptionsOverwrite 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.
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.
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.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/kitProcessors
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.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 .+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 .