Inputmask
Inputmask copied to clipboard
Specific readonly symbols in credit card mask
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 ,
Do you only want to show the creditcard formatted in the above format (with ***) or also while typing?
Just to show. After starting editing user can work with mask "____ ____ ____ ____"
@mantia11 ,
Have a look at https://jsfiddle.net/6k8d04yb/
@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 ,
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/
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 ,
Feel free to spread the word or pay me a coffee by making a small donation :-)
@RobinHerbots Notice a problem when using the .inputmask('unmaskedvalue');
with this custom mask. Do you know how to get the correct value?
@RobinHerbots inputmask('unmaskedvalue')
with custom mask is not working.
@vyscond , @elend80 ,
Can you elaborate a bit. What exactly doesn't work? What do you get as value.
https://jsfiddle.net/6k8d04yb/12/
@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.