Narayan Vaidyanathan

Dear Blog readers, welcome back..

Now we are talking about very good real time challenges about displaying card number with the mask of star(*) and random blank space between every 4 characters.

UI Developer facing following challenges in displaying and formatting card number:

• – Star(*) not aligning vertical middle
• – Need space between every 4 digits

Its developed for low band width internet connection and CC payment pages.

tools used html, javascript and css

Here we go..

<style>
#cardNoVal span{
	font-size:165%;
}
.star{
	font-size: 1.5em !important;
    position: relative;
    bottom: -0.2em;
    letter-spacing: 1px;
}
</style>
<h3>Card Number</h3>
<div>
	<input type="hidden" id="cardNo"  name="cardNo" value="**** **** **** 1234" />
	<span id="cardNoVal">**** **** **** 1234</span>
</div> 

<script type="text/javascript">
	var str = document.getElementById("cardNo").value;
	//alert(str);
	var res = str.split("");
	//alert(res);
	var out = '';
	for (var z = 0; z < str.length; ++z) {
	    var ch = str.charAt(z);
	    if (ch == '<') {
	        while (ch != '>') {
	            out += ch;
	            ch = str.charAt(++z);
	        }
	        out += ch;
	        continue;
	    }
	    if((z == 3)||(z == 8)||(z == 13)){
	    	//alert(ch);
		    if(ch == "*"){
		    	out += '' + ch + ' ';
		    } else {
		    	out += '' + ch + ' ';
		    }	
	    } else {
	    	//alert(ch);
		    if(ch == "*"){
		    	out += '' + ch + '';
		    } else {
		    	out += '' + ch + '';
		    }	
	    }
	}
	//alert(out);
	document.getElementById("cardNoVal").innerHTML = out;
</script>