# Masking the Credit Card Numbers using JQuery - Solution4

Posted by Rajnilari2015 under jQuery category on | Points: 40 | Views : 484
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>\$(function () {    \$("#txtCCN").keyup(function (e) {        var CCNValue = \$(this).val();        addSpace.call(this, [4, 9, 14], CCNValue);        addMask.call(this, [7, 15], \$(this).val());    });    function addSpace(spacePoints, value) {        for (var i = 0; i < spacePoints.length; i++) {            var point = spacePoints[i];            if (value.length > point && value.charAt(point) !== ' ')                 \$(this).val((value.substr(0, point) + " " + value.substr(point, value.length)));        }    }    function addMask(range, value) {        \$("#txtCCN").val(value.substring(0, range[0]) + value.substring(range[0], range[1]).replace(/[0-9]/g, "*") + value.substring(range[1]));    }});</script></head><body>Credit Card number: <input type="text" id="txtCCN" maxlength=19 /></body></html>`