Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Credit card inout boxhttp://jsbin.com/eqIbEp/2
#inp{
border: 1px solid gray;
font-size: 24px;
padding: 5px;
outline: none;
width: 50%;
min-width: 300px;
}
#inp:hover,#inp:active{
outline: none;
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="credit card formatter" />
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<input type=text id=inp maxlength="19" />
</body>
</html>
(function (document, console){
"use strict";
var inp = document.getElementById("inp");
function formatCC(txt){
var ntxt = "";
for (var i = 0; i< txt.length; i++) {
if (i !== 0 && i%4 === 0) {
ntxt += " ";
}
ntxt += txt[i];
}
return ntxt;
}
inp.addEventListener("keyup", function(){
var obj = this;
var noSpaceVal = obj.value.split(" ").join("");
obj.value = formatCC(noSpaceVal);
});
})(window.document, console);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment