Credit Card Input field, with space every 4 characters using Jquery

Here is a simple way to create an input field for Credit Cards.  Credit card input fields were made in 4 different text fields to get the entries from the user.  Which used to jump over to next input field automatically.  But this code accepts numbers in a single input field with a space after every 4 characters.  Simple Jquery is used to solve the problem.  On every keypress in the focussed input field the action is initiated.

HTML for the input field

<input class="field" id="credit-card" value="" autocomplete="off" type="text" />

Jquery

<script>
jQuery(document).ready(function() {
  $('#credit-card').on('keypress change', function () {

  $(this).val(function (index, value) {
  return value.replace(/\W/gi, '').replace(/(.{4})/g, '$1 ');
  });
});

});
</script>