<input type="text" id="input_code">
body {
margin: 20px;
}
View Compiled
$('#input_code').keyup(function(a) {
var b = $("#input_code").val().length - a.currentTarget.selectionStart;
var c = $("#input_code").val();
if (
(a.keyCode >= 65 && a.keyCode <= 90) || // uppercase letters
(a.keyCode >= 48 && a.keyCode <= 57) || // numbers
(a.keyCode >= 96 && a.keyCode <= 105) // numbers on keypad
){
var d = '', e = $("#input_code").val().replace(/-/g, "").replace(/\s/g, "");
if (e.length > 0) {
var SEGMENT_LENGTH = 4;
for (var i = 0; i < e.length; i+=SEGMENT_LENGTH) {
d += e.substring(i, i + SEGMENT_LENGTH) + ' ';
}
d = d.replace(/\s*$/, "");
}
if (c != d) {
$("#input_code").val(d);
a.currentTarget.selectionStart = a.currentTarget.selectionEnd = d.length - b;
}
}
});
This Pen doesn't use any external CSS resources.