<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;
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js