Processors

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:

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 and data . 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:

Preprocessor returns an objects of the same interface as the first argument.

Postprocessors

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:

Element state after mask had been applied. Postprocessor can return updated element state which would then be reflected by the actual text field.
Initial element state before preprocessors and mask execution. It is a readonly argument, the past cannot be changed...

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!

Stacking of multiple processors

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.

Next steps

The following sections are recommended to explore core concepts further:

Maskito