Narayan Vaidyanathan

  • Wanna feel my punch?

    Check out my creative and interesting projects.

    I specialize in creating usable designs for the web with a professional approach and convert them into HTML 4 & 5 / CSS with Open Source Themes

displaying and formatting card number using javascript

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>
  • Copyright © 2012 All Right Reserved.
  • Like Narayan ?
    Connect with me