Masking the Credit Card Numbers using JQuery - Solution2

Rajnilari2015
Posted by Rajnilari2015 under jQuery category on | Points: 40 | Views : 195
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();
var CCNLength = CCNValue.length;

$.each(CCNValue, function(i) {

if (CCNLength <= 7) {
$("#txtCCN").val(CCNValue);
} //end if

if (CCNLength >= 8 && CCNLength <= 14) {
$("#txtCCN").val(CCNValue.substring(0, 7) + CCNValue.substring(7, CCNLength).replace(/[0-9]/g, "*"));
} //end if

if (CCNLength >= 15) {
$("#txtCCN").val(CCNValue.substring(0, 7) + CCNValue.substring(7, 15).replace(/[0-9]/g, "*") + CCNValue.substring(15));
} //end if
});
});
});
</script>
</head>

<body>
<input type="text" id="txtCCN" maxlength=19 />
</body>
</html>

Comments or Responses

Login to post response