Masking the Credit Card Numbers using JQuery - Solution3

Rajnilari2015
Posted by Rajnilari2015 under jQuery category on | Points: 40 | Views : 646
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
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script>
$(document).ready(function () {

$("#txtCCN").keyup(function (e) {
var CCNValue = $(this).val();
CCNValue = CCNValue.replace(/ /g, '');

var CCNLength = CCNValue.length;
var m = 1;
var arr = CCNValue.split('');
var ccnnewval = "";

if (arr.length > 0) {
for (var m = 0; m < arr.length; m++) {
if (m == 4 || m == 8 || m == 12) {
ccnnewval = ccnnewval + ' ';
}

if (m >= 6 && m <= 11) {
ccnnewval = ccnnewval + arr[m].replace(/[0-9]/g, "*");
} else {
ccnnewval = ccnnewval + arr[m];
}
}
}

$("#txtCCN").val(ccnnewval);
});
});
</script>
</head>
<body>
Credit Card number: <input type="text" id="txtCCN" maxlength=19 />
</body>
</html>

Comments or Responses

Login to post response