There are a plethora of open-source masking libraries available to transform the input value into the desired format(masked value). But sometimes, when we have the odd requirements for masking the input value, most of the libraries probably would fail to accomplish the requirements. So why don’t we cringe ourself in this situation? We should hustle ourselves in the direction of creating our mask input as per our requirements.
In this article, I’m going to provide a way of creating a masking input textbox in Vue 2. You can follow the same approach in any other JS frontend frameworks like React, Angular, Ember, etc. if you are comfortable with it.
Here are the steps to construct a simple masking textbox.
Here, I have used a model option to give support of the v-model on the input component. By using a model option we can obsolete the writing event emitter which we require to update the value in the parent component.
As of now, we have created a basic input component where users can enter some text. Now, it’s time to retrofit this component to provide masking functionality.
I’m going to enhance this component in such a way that whenever the user enters numbers then it will automatically mask the number value into the comma-separated value. For example, 1000 will be converted into 1,000, 25000 will be converted into 25,000, etc. You can consider it as a kind of currency masking input.
You can find below code snippet about the usage of the created Input component.
Hola! we have created the simplest masking input component. The very imperative thing behind creating the masking component is that whenever we get the value from the input we have to first unmask it to the original value.
As you can see in the above code snippet I have unmasked the value in the handleInput() function and set to the hiddenValue variable using blur event. As soon as, we set the unmasked value into hiddenValue, the computed property comes into the picture and plays its role to mask the hiddenValue. Also, we have set the computed property as the value attribute of the input textbox so it will show the masked value into the input textbox.
Remember I haven’t put any key input restrictions for the given input. So, users can enter any alphabets or special characters into the input. I haven’t put these all restrictions to demystifying this blog.
The idea behind writing this article is to give just a hint for creating a masking component that you might be looking for. This is a simple idea, but you can create a very complex and intuitive masking component by following a similar approach. Also read – Exploring Javascript Copying: Understanding Deep Copy and Shallow Copy.
