imaskjs icon indicating copy to clipboard operation
imaskjs copied to clipboard

Allow character replacement option

Open Holyphoenix opened this issue 4 years ago • 0 comments

For now, I will probably try to implement this myself using a prepare function locally, but I think it would be awesome to support it within the library.

I have a use case, where I need to replace characters from data I am pulling from elsewhere or data that is entered. I want to change the first two sets of digits to an x, but continue to show the last four. It would seem that if I have overwrite set to true, it should overwrite my input instead of pushing it to the end. It's not quite the same as the overwrite option.

So I have a number (SSN) 123-45-6789.
Read Case: I read this number from elsewhere, but for printing and display purposes need to only show the last four digits and replace the other digits with x. After masking I want it to be xxx-xx-6789. Currently if I did this without replacement even with overwrite on, my value would be xxx-xx-1234.
Input Case: When I type in, I want to take the actual SSN, but replace each character with x after a character is typed.

My proposal would be to add a new option called "replacements." You would specify and block in the mask, and if that block has a corresponding "replacement" object, you would replace the entry with the value.

So my mask options would like kinda like this:

var maskOptions = {
    mask: '(x)(x)(x)-(x)(x)-0000',
    replacements: {
    	x: {
      	mask: '0',
      	replace: 'x'
      }
    }
  };

When typing, if I type a character that is not within the replacements mask, it wouldn't accept the character. But if I entered the right value, say 1, it would accept it, but then replace it in the mask.

Holyphoenix avatar Jun 02 '20 19:06 Holyphoenix