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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js