Created
May 1, 2013 22:30
-
-
Save turbo1912/5498905 to your computer and use it in GitHub Desktop.
A cool mobile credit card input
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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