Text-mask: Impossible to just have a mask with spacing for card inputs

Created on 19 Apr 2017  路  4Comments  路  Source: text-mask/text-mask

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: " "
question

Most helpful comment

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'
},

All 4 comments

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'
},
Was this page helpful?
0 / 5 - 0 ratings

Related issues

skube picture skube  路  3Comments

GeometricProgress picture GeometricProgress  路  4Comments

KevinGruber picture KevinGruber  路  6Comments

cargonsan picture cargonsan  路  4Comments

Sn3b picture Sn3b  路  6Comments