Masking the Credit Card Numbers using Vanilla JS

Posted by Rajnilari2015 under JavaScript category on | Points: 40 | Views : 3858
Suppose we have a textbox and we have to mask (with asterisk (*) character) a portion of the string (which is a credit card number) when user enter the values one after the other.
That means , if the user enters XXXX XXXX XXXX XXXX , the output will be XXXX XX** **** XXXX where X represents any valid number.
The below program will help to do so

document.addEventListener('DOMContentLoaded', function() {
document.getElementById('txtCCN').addEventListener('keyup', function() {
var value = this.value;
this.value = value.substring(0, 7) + value.substring(7, 15).replace(/\d/g, '*')
+ value.substring(15);}, false);});

------------ HTML--------------
<input type="text" id="txtCCN" required maxlength="19" />

Comments or Responses

Login to post response