Skip to content

Instantly share code, notes, and snippets.

@turbo1912

turbo1912/gist:5498905

Created May 1, 2013 22:30
Show Gist options
  • Save turbo1912/5498905 to your computer and use it in GitHub Desktop.
Save turbo1912/5498905 to your computer and use it in GitHub Desktop.
Download ZIP
A cool mobile credit card input
Raw
gistfile1.txt
<!doctype html>
<script src="http://zeptojs.com/zepto.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<style>
.slide{
overflow: hidden;
height:10.5px;
}
#ccNumber{
padding-left: 41px;
height:40px;
width: 150px;
text-indent:0px;
}
#test{
display: none;
-moz-appearance: textfield;
-webkit-appearance: textfield;
background-color: white;
background-color: -moz-field;
border: 1px solid darkgray;
box-shadow: 1px 1px 1px 0 lightgray inset;
font: -moz-field;
font: -webkit-small-control;
padding-top: 15px;
padding-left: 42px;
width: 152px;
height: 29px;
}
#hey{
border: solid;
height: 200px;
width: 200px;
}
</style>
<script type="text/javascript">
var type = null;
function handleEvent(oEvent) {
var oTextbox = document.getElementById("ccNumber");
if(oTextbox.value.length == 2) type = setType(oTextbox.value); oTextbox.style.background = type["background-url"];
if(type != null){
if( (oTextbox.value.length == type["spaces"][0]) || (oTextbox.value.length == type["spaces"][1]) || (oTextbox.value.length == type["spaces"][2])) oTextbox.value += " ";
if((oTextbox.value.length == type["lenght"]-1)){
oTextbox.parentNode.removeChild(oTextbox);
document.getElementById("test").style.display="inline";
document.getElementById("test").innerHTML = "<span class='wrap'><span class='slide'>" + oTextbox.value.substring(0,type["last4"]) + "</span>" + "<span>" + oTextbox.value.substring(type["last4"],type["lenght"]) + String.fromCharCode(oEvent.charCode) + "</span></span>";
document.getElementById("test").style.background = type["background-url"];
$('.slide').animate({width: 'toggle'}, 300);
}
}
}
function setType(digits){
var type = {"spaces": [4,9,14] , "lenght": 19, "last4" : 15 };
if(digits.match(new RegExp(/5[1-5]/))) type["background-url"] = '#ffffff url("http://www.credit-card-logos.com/images/mastercard_credit-card-logos/mastercard_logo_3.gif") no-repeat left';
if (digits.match(new RegExp(/4[1-9]/))) type["background-url"] = '#ffffff url("http://www.credit-card-logos.com/images/visa_credit-card-logos/visa_logo_3.gif") no-repeat left';
if(digits.match(new RegExp(/6[1-5]/)))type["background-url"] = '#ffffff url("http://www.credit-card-logos.com/images/discover_credit-card-logos/discover_logo_3.gif") no-repeat left';
if(digits.match(new RegExp(/3[4-7]/))) {
type["background-url"] = '#ffffff url("http://www.credit-card-logos.com/images/american_express_credit-card-logos/american_express_logo_2.gif") no-repeat left';
var type = {"spaces": [4,11,20] , "lenght": 17, "last4" : 12 };
}
return type;
}
</script>
<html>
<head>
<title> Demo </title>
</head>
<body>
<div class="cardContainer">
<img src="">
<input type="text" placeholder="1234 5678 9012 3456" onkeypress="handleEvent(event)" maxlength="19" id="ccNumber">
<div id="test"> 1234 123 3213 321312</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment