Lets first see how credit card number looks without masking:
Lets create an input field with length as 20 characters. The 16 digits for card number while 4 are for spaces.
<input type="text" size="20" autocomplete="off" class="form-control" id="number" required />
At the bottom of your file (before the closing of body tag) add the following snippet:
You can change the
id of your element as per your dom.
After applying the above script, we will get masking as below:
Now, you will notice that the numbers are easy to read and in a format which a payment card normally has.