<div class="group-card">
<input id="cc" type="text" name="creditcard" required="" value="0000 0000 0000 0000">
<span class="bar"></span>
<label>Номер карты</label>
let node = document.getElementById('cc');
node.addEventListener("keydown", function(event) {
event.preventDefault();
if (!/[0-9]/.test(event.key)) return false;
let cursor = node.selectionStart;
if (cursor == 19) return false;
if (cursor == 4 || cursor == 9 || cursor == 14) cursor++;
node.value = node.value.substr(0, cursor) + event.key + node.value.substr(cursor + 1);
node.selectionStart = cursor+1;
node.selectionEnd = cursor+1;
});
This Pen doesn't use any external CSS resources.