So I'm using text-mask for a credit card form and wanted to achieve spacing between numbers in groups of 4 like: 4111 1111 1111 1111
With placeholderChar as _ it's all good, I end up with: 411_ ____ ____ ____ but I think this looks a little messy, so I wanted to remove the underscores and just have spacing between the groups as you type: 411
Mask: [{},{},{},{}," ",{},{},{},{}," ",{},{},{},{}," ",{},{},{},{}]
placeholderChar: " "
When I try to use a mask with a placeholder I get an error that the character cannot be used as part of the mask, so it's essentially impossible to use a mask just for spacing.
Error:
Placeholder character must not be used as part of the mask. Please specify a character that is not present in your mask as your placeholder character.
The placeholder character that was received is: " "
The mask that was received is: [{},{},{},{}," ",{},{},{},{}," ",{},{},{},{}," ",{},{},{},{}]
Error: Placeholder character must not be used as part of the mask. Please specify a character that is not present in your mask as your placeholder character.
The placeholder character that was received is: " "
why not use _ (underscore) as placeholderChar.. and use spaces in the mask like you are currently.
[/\d/,/\d/,/\d/,/\d/," ",/\d/,/\d/,/\d/,/\d/," ",/\d/,/\d/,/\d/,/\d/," ",/\d/,/\d/,/\d/,/\d/]
Let me know if that doesn't work for you
It does work but I think it looks messy. None of the other checkout user experiences use underscores as placeholders (like Stripe checkout)
I only really wanted to add spaces between groups of 4 numbers and was recommended to use this library. But it looks like it's impossible to do :S
I've found a workaround... if I use a tab character instead of a space for the placeholderChar, but I'm just afraid that my linting process or another guy working on the project replaces the tab for a space and the app breaks during runtime :(
Found another workaround:
{
mask: [/\d/, /\d/, /\d/, /\d/, '\u2000', /\d/, /\d/, /\d/, /\d/, '\u2000', /\d/, /\d/, /\d/, /\d/, '\u2000', /\d/, /\d/, /\d/, /\d/],
placeholderChar: '\u2002'
},
Most helpful comment
Found another workaround: