Inputmask icon indicating copy to clipboard operation
Inputmask copied to clipboard

Specific readonly symbols in credit card mask

Open mantia11 opened this issue 9 years ago • 11 comments

Hi!

Sorry to write not about error, but I need some advice very much. On some settings page user shouldn't see full number of his credit card, but "**** **** **** 5869" text. The input-mask is "9{4} 9{4} 9{4} 9{4}"

How can I let input to show asterisks, but keep mask function while editing? Is it anyhow possible?

mantia11 avatar Feb 05 '16 13:02 mantia11

@mantia11 ,

Do you only want to show the creditcard formatted in the above format (with ***) or also while typing?

RobinHerbots avatar Feb 05 '16 14:02 RobinHerbots

Just to show. After starting editing user can work with mask "____ ____ ____ ____"

mantia11 avatar Feb 05 '16 15:02 mantia11

@mantia11 ,

Have a look at https://jsfiddle.net/6k8d04yb/

RobinHerbots avatar Feb 05 '16 15:02 RobinHerbots

@RobinHerbots, sorry for missunderstanding.

Entered digits should be visible. Asterisks used for creditcard number saved on / got from server to hide it just on page load. While editing (or after input focus) we don't need to hide it already.

I thought that autoUnmask: true could help with it, but maybe I didn't understand good how it works. Also I had a solution to clean input and add mask onfocus... or to convert asterisks to placeholders with ability to type digits over them (leaving last 4 digits)

mantia11 avatar Feb 05 '16 15:02 mantia11

@mantia11 ,

No problem. Maybe I could create some alias for creditcardnumbers whcih include such a functionality out of the box. For the moment have a look at version 2 of the fiddle

https://jsfiddle.net/6k8d04yb/1/

RobinHerbots avatar Feb 08 '16 09:02 RobinHerbots

Cool! Yeap! It works for me :) Could I thank you anyhow for your help? I can share your plugin or website (if you have one) among my friends developers :)

mantia11 avatar Feb 08 '16 14:02 mantia11

@mantia11 ,

Feel free to spread the word or pay me a coffee by making a small donation :-)

RobinHerbots avatar Feb 09 '16 08:02 RobinHerbots

@RobinHerbots Notice a problem when using the .inputmask('unmaskedvalue'); with this custom mask. Do you know how to get the correct value?

ghost avatar Aug 01 '17 17:08 ghost

@RobinHerbots inputmask('unmaskedvalue') with custom mask is not working.

elend80 avatar Oct 17 '17 05:10 elend80

@vyscond , @elend80 ,

Can you elaborate a bit. What exactly doesn't work? What do you get as value.

https://jsfiddle.net/6k8d04yb/12/

RobinHerbots avatar Oct 17 '17 08:10 RobinHerbots

@vyscond , @elend80 ,

Can you elaborate a bit. What exactly doesn't work? What do you get as value.

https://jsfiddle.net/6k8d04yb/12/

This is an old issue, but I'm trying to figure out how to do this. In the example above, on load the input is showing "XXXX XXXX XXXX 1234", clicking the "UNMASK" button creates an alert with "XXXX XXXX XXXX 1234". If I click on the input it unmasks, but never re-masks.

gschechter avatar Aug 24 '22 00:08 gschechter