diff --git a/addons/phone/index.html b/addons/phone/index.html index d40a51f21..28df4f5b3 100644 --- a/addons/phone/index.html +++ b/addons/phone/index.html @@ -20,9 +20,9 @@ +
-This mask is based on the libphonenumber-js package.
UsemaskitoPhoneOptionsGenerator
to create a mask for phone input. +
Phone
PHONEThis mask is based on the libphonenumber-js package.
UsemaskitoPhoneOptionsGenerator
to create a mask for phone input.Basic
Kazakhstan phone example
-@@ -47,7 +47,7 @@ Validation
For validating phone number you can use
isValidPhoneNumber
,isPossiblePhoneNumber
functions 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
,isPossiblePhoneNumber
functions 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
strict
option tofalse
enables non-strict mask mode and allow user to type any country phone number.The
countryIsoCode
option 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
strict
option tofalse
enables non-strict mask mode and allow user to type any country phone number.The
countryIsoCode
option 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 6416909ba..b7ba56f62 100644 --- a/browser-support/index.html +++ b/browser-support/index.html @@ -20,9 +20,9 @@ + - + 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 c3c2b31d3..ce851690c 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.8.1 (2023-10-19)
diff --git a/core-concepts/element-state/index.html b/core-concepts/element-state/index.html index f17c8f894..b71264f60 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 c12089deb..6fb82a4aa 100644 --- a/core-concepts/mask-expression/index.html +++ b/core-concepts/mask-expression/index.html @@ -20,9 +20,9 @@ + - diff --git a/core-concepts/overview/index.html b/core-concepts/overview/index.html index c2884cf6c..086cdaa9d 100644 --- a/core-concepts/overview/index.html +++ b/core-concepts/overview/index.html @@ -20,14 +20,14 @@ + - 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
mask
parameter 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
mask
parameter 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:
-@@ -37,7 +37,7 @@ Be careful! It can be not performance-friendly to generate new mask expression on every input change.Think about optimization and memoization of the such function.
Next steps
The following sections are recommended to explore core concepts further:
Be careful! It can be not performance-friendly to generate new mask expression on every input change.Think about optimization and memoization of the such function.
Next steps
The following sections are recommended to explore core concepts further:
diff --git a/core-concepts/overwrite-mode/index.html b/core-concepts/overwrite-mode/index.html index 558db75d5..c725c9768 100644 --- a/core-concepts/overwrite-mode/index.html +++ b/core-concepts/overwrite-mode/index.html @@ -20,9 +20,9 @@ + - Core concepts
The main entity of Maskito core library is
Maskito
class which accepts 2 arguments in constructor:
- native
HTMLInputElement
orHTMLTextAreaElement
- set of configurable
MaskitoOptions
+
+ Core concepts
The main entity of Maskito core library is
Maskito
class which accepts 2 arguments in constructor:
- native
HTMLInputElement
orHTMLTextAreaElement
- set of configurable
MaskitoOptions
- Avoid wasting computation power or memory resources!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:
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
overwriteMode
parameter.Transformer
Learn how to correctly programmatically update element's value via
maskitoTransform
. Avoid wasting computation power or memory resources!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:
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
overwriteMode
parameter.Transformer
Learn how to correctly programmatically update element's value via
maskitoTransform
.diff --git a/core-concepts/plugins/index.html b/core-concepts/plugins/index.html index 35bc48611..441e08aeb 100644 --- a/core-concepts/plugins/index.html +++ b/core-concepts/plugins/index.html @@ -20,9 +20,9 @@ + - 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.
overwriteMode
can be of a following type:
shift
(default)replace
- function that receives element state as an argument and returns
shift
orreplace
Shift 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.
overwriteMode
can be of a following type:
shift
(default)replace
- function that receives element state as an argument and returns
shift
orreplace
Shift 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
overwriteMode
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
orreplace
.+
Dynamically detected mode
Parameter
overwriteMode
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
orreplace
.
-@@ -97,7 +97,7 @@ Next steps
The following sections are recommended to explore core concepts further:
Next steps
The following sections are recommended to explore core concepts further:
diff --git a/core-concepts/processors/index.html b/core-concepts/processors/index.html index a4828f513..f200cefa5 100644 --- a/core-concepts/processors/index.html +++ b/core-concepts/processors/index.html @@ -20,9 +20,9 @@ + - 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
This plugin is available asmaskitoRejectEvent
in@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
This plugin is available asmaskitoRejectEvent
in@maskito/kit
-@@ -47,7 +47,7 @@ Next steps
The following sections are recommended to explore core concepts further:
Next steps
The following sections are recommended to explore core concepts further:
diff --git a/core-concepts/transformer/index.html b/core-concepts/transformer/index.html index e965c2205..aabfc3830 100644 --- a/core-concepts/transformer/index.html +++ b/core-concepts/transformer/index.html @@ -20,14 +20,14 @@ + - Processors
MaskitoOptions
have optional parameterspreprocessors
andpostprocessors
. 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.
Before you learn more about processors, you should learn a single prerequisite — meaning of the term "Element state" .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:
elementState
anddata
. Object of the same interface with updated or unchanged properties can be returned from the preprocessor.+
+ Processors
MaskitoOptions
have optional parameterspreprocessors
andpostprocessors
. 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.
Before you learn more about processors, you should learn a single prerequisite — meaning of the term "Element state" .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:
elementState
anddata
. Object of the same interface with updated or unchanged properties can be returned from the preprocessor.
-@@ -42,7 +42,7 @@ Stacking of multiple processorsThe Maskito team likes code decomposition and promotes it! Don't put all complex logic inside a single processor. Both parameters
preprocessors
andpostprocessors
accepts array of same type processors. Break your code into the several independent processors so that each processor implements only a single task.Next steps
The following sections are recommended to explore core concepts further:
Stacking of multiple processorsThe Maskito team likes code decomposition and promotes it! Don't put all complex logic inside a single processor. Both parameters
preprocessors
andpostprocessors
accepts array of same type processors. Break your code into the several independent processors so that each processor implements only a single task.Next steps
The following sections are recommended to explore core concepts further:
diff --git a/cypress/index.html b/cypress/index.html index 9740b308f..86f1eb17c 100644 --- a/cypress/index.html +++ b/cypress/index.html @@ -20,9 +20,9 @@ + - Transformer
COREMaskito libraries were created to prevent user from typing invalid value.
Maskito listensbeforeinput
andinput
events. Programmatic (by developer) changes of input's value don't trigger these events! Maskito is based on the assumption that developer is capable to programmatically patch input with valid value!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
maskitoTransform
utility .+
+ Transformer
COREMaskito libraries were created to prevent user from typing invalid value.
Maskito listensbeforeinput
andinput
events. Programmatic (by developer) changes of input's value don't trigger these events! Maskito is based on the assumption that developer is capable to programmatically patch input with valid value!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
maskitoTransform
utility .
-Next steps
The following sections are recommended to explore core concepts further:
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 b1e5c7c88..8d304a96f 100644 --- a/frameworks/angular/Setup/index.html +++ b/frameworks/angular/Setup/index.html @@ -20,15 +20,15 @@ + - Angular
- Install libraries
/your/project/path> +
Angular
- Install libraries
/your/project/path>
-- Import
MaskitoModule
to your moduleyour.module.ts +
- Import
MaskitoModule
to your moduleyour.module.ts
diff --git a/frameworks/angular/index.html b/frameworks/angular/index.html index 3c72945a8..f5eeb68e3 100644 --- a/frameworks/angular/index.html +++ b/frameworks/angular/index.html @@ -20,23 +20,23 @@ + - Angular
@maskito/angular
is a light-weighted library to use Maskito in an Angular-way. PrerequisitesTo get the most out of this guide, you should review the topic "Core Concepts" first.
Write less code
- No need to query element from DOM. Just pass all required options to
[maskito]
directive.- No need to worry about clean-ups. All created event listeners are automatically removed after element is detached from DOM.
Basic directive approach
Use it when you have direct access to native input element.
your.component.ts +
Angular
@maskito/angular
is a light-weighted library to use Maskito in an Angular-way. PrerequisitesTo get the most out of this guide, you should review the topic "Core Concepts" first.
Write less code
- No need to query element from DOM. Just pass all required options to
[maskito]
directive.- No need to worry about clean-ups. All created event listeners are automatically removed after element is detached from DOM.
Basic directive approach
Use it when you have direct access to native input element.
your.component.ts
-Nested input element
Pass a predicate to maskito to find input element for you, if you do not have a direct access to it.
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.your.component.ts +
Nested input element
Pass a predicate to maskito to find input element for you, if you do not have a direct access to it.
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.your.component.ts
-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